在VUE-CLI 3下的第一个Element-ui项目（菜鸟专用）

1、
今天第一次试用了vue-cli 3 来写个人第一个基于Element-ui的项目，我会从项目的建立到项目的运行尽量详细的给你们讲一遍。
2、安装及建立
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. 等待建立

---

3、引用基于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

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