在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

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