10分钟阅读一篇关于Vue-cli3和Element-UI的文章

Vue-cli

Vue脚手架的基本用法，vue脚手架用于快速生成vue项目基础架构：

地址：

https://cli.vuejs.org/zh/

使用方式，安装3.x版本的vue脚手架

npm install -g @vue/cli

功能丰富

对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。

易于扩展

它的插件系统可让社区根据常见需求构建和共享可复用的解决方案。

无需 Eject

Vue CLI 彻底是可配置的，无需 eject。这样你的项目就能够长期保持更新了。

CLI 之上的图形化界面

经过配套的图形化界面建立、开发和管理你的项目。

即刻建立原型

用单个 Vue 文件即刻实践新的灵感。

面向将来

为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。

基于交互式命令行的方式，建立vue项目

vue create my-project

基于图形化界面的方式，建立vue项目

vue ui

基于2.x的方式，建立vue项目

npm install -g @vue/cli-init
vue init webpack my-project

npm run serve

vue脚手架的自定义配置

经过package.json配置项目

"vue":{
 "devServer":{
  "port":"8888",
  "open":true
  }
}

不推荐使用这种配置方式，由于package.json主要用来管理包的配置信息，推荐将vue脚手架相关的配置，单独定义到vue.config.js配置文件中。

Element-UI的使用

它是一套为开发者，设计师和产品经理准备的基于Vue2.0的桌面端组件库。

地址：

http://element-cn.eleme.io/#/...

用命令行的方式手动安装

安装依赖包 npm i element-ui -S
导入 Element-UI 相关资源

// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置vue插件
Vue.use(ElementUI);

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 手动配置element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
 router,
 render: h=>h(App)
}).$mount('#app')

用图形化界面自动安装

运行vue ui命令，打开图形化界面，经过vue项目管理器，进入具体的项目配置面板，点击插件，添加插件，进入插件查询面板，搜索vue-cli-plugin-element，而后安装。

插件配置

参考资料：

https://cli.vuejs.org/zh/

在博客平台里，将来的路还很长，也但愿本身之后的文章你们能多多支持，多多批评指正，咱们一块儿进步，一块儿走花路。

很是感谢读者能看到这里，若是这个文章写得还不错，以为「达达」我有点东西的话，以为我可以坚持的学习，以为此人能够交朋友的话， 求点赞👍 求关注❤️ 求分享👥 对暖男我来讲真的

很是有用！！！

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

做者Info：

【做者】：Jeskson
【原创公众号】：达达前端小酒馆。
【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
【转载说明】：转载请说明出处，谢谢合做！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

---

若本号内容有作得不到位的地方（好比：涉及版权或其余问题），请及时联系咱们进行整改便可，会在第一时间进行处理。

---

请点赞！由于大家的赞同/鼓励是我写做的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客