脚本宝典收集整理的这篇文章主要介绍了在VUE-CLI 3下的第一个Element-ui项目（菜鸟专用），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

一、
今天第一次试用了vue-cli 3 来写我的第一个基于Element-ui的项目，我会从项目的创建到项目的运行尽可能详细的给大家讲一遍。
二、安装及创建
1.可以使用下列的命令进行安装

npm install -g @vue/cli

yarn global add @vue/cli  #mac推荐使用

应为没用过yarn,我在这里使用的是常用的npm,如果安装速度过慢，可以选择使用淘宝镜像进行安装。

npm install -g @vue/cli cnpm --registry=https://registry.npm.taobao.org

---

2.完成以上步骤之后，就可以开始创建项目了

F:>vue create aha-wts-test

然后出现以下信息

Vue CLI v3.0.5
? Please pick a preset:

mock (vue-router, vuex, sass, babel, typescript, eslint, unit-jest, e2e-cypress) # 这是我之前创建的项目并保存它的配置，详情可看这里
default (babel, eslint) # 默认创建。因为不太清楚它是否具备了该有的功能和组件，所以我选择了下面那个
Manually select features # 自定义创建

---

按空格进行勾选

1. Bable 预编译 勾选
2. TypeScript 微软做的，用到的勾选
3. Progressive Web App (PWA) Support 优化用的，用到的勾选
4. Router 路由 勾选
5. Vuex 勾选
6. CSS Pre-processors CSS预处理器 勾选
7. Linter/Formatter 代码格式化
8. Unit Testing 单元测试
9. E2E Testing E2E测试

---

这是检验标准，配合VScode
个人推荐第一种和第四种

---

接下来选择

1. lint on save
2. in package.json (个人习惯)
3. 选择是否保存自己的习惯
4. 等待创建

---

三、引用基于vue-cli@3的Element组件
在这里要使用到vue-cli@3下的Element的组件
特别方便
创建好项目后输入

vue add element

会出现以下提示

? How do you want to import Element? (Use arrow keys)

为了方便，选择第一个全局引用：fully import

1. ? Do you wish to overwrite Element's SCSS variables? Yes
2. Choose the locale you want to load zh-CN

到这一步之后，就可以开始开荒了

的确精简了许多

npm run serve

目录结构可参考：点击这里

脚本宝典总结

以上是脚本宝典为你收集整理的在VUE-CLI 3下的第一个Element-ui项目（菜鸟专用）全部内容，希望文章能够帮你解决在VUE-CLI 3下的第一个Element-ui项目（菜鸟专用）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。