（小白篇）vue-cli3.0建立项目+引入element-ui

vue-cli在2018年8月份发布了3.0版本，通过重构以后，能够说是一个船心版本！
在项目都落地以后，就想升级一下cli版本，尝一尝3.0带来的温馨，也是为后面项目的开展作一个准备。
首先，若是电脑已经安装了vue-cli2.0，需先进行卸载操做

# npm
npm uninstall vue-cli -g
# yarn
yarn global remove vue-cli

卸载后进行安装操做

# npm
npm install @vue/cli -g
# yarn
yarn global add @vue/cli

安装成功后，敲入如下命令行建立项目

vue create test-cli3

这跟2.0的vue init webpack命令不同，如想保持一致的输入效果，请自行安装

npm install @vue/cli-init -g

那么下面就跟着建立步骤一步一步来吧！

在上面敲入建立项目的命令以后，就会出现下面的选择：

? Please pick a preset: (Use arrow keys)
> first_test (vue-router, less, babel, eslint)
  default (babel, eslint)
  Manually select features

选择插件，默认的只有babel和eslint，这里选择Manually select featrues，后面经过手动配置本身所须要的插件

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
>(*) Babel  // 预编译
 ( ) TypeScript  //TS
 ( ) Progressive Web App (PWA) Support
 (*) Router // 路由
 (*) Vuex // 数据仓库
 (*) CSS Pre-processors // css预处理器
 (*) Linter / Formatter  // 代码格式化
 ( ) Unit Testing // 单元测试
 ( ) E2E Testing  // e2e测试

上面的插件根据项目状况须要，使用空格选中。上面带*号的就是我这一次选中的。
选了router以后会询问是否开启history模式，以及选择css预处理器，这里根据我的状况选用。
接下来就是eslint选用规则，我的推荐第一或者第四种

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选择完eslint规则以后，再选择Lint on save配置当保存代码时使用校验规则。

下一步就是询问要将babel、eslint这些配置单独配置成文件仍是放在package.json文件，这里为了避免让package.json文件显得太混乱，把配置单独弄成文件，也方便配置

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.
> In dedicated config files
> In package.json

配置完这些以后，就会询问你是否将刚刚这些配置保存，方便之后建立项目的时候直接使用

Save this as a preset for future projects? (y/N)

这里敲y保存，并给这个配置命名，而后就开始下载模板啦

上面就是下载完的项目结构，比2.0少了不少文件夹，也没有一大堆webpack的配置文件，这对于不少小白来讲，不用一开始就须要理解不少配置，看起来比较清爽。

下面就开始安装element-ui
在cli3.0安装插件也有一些差别，具体请移步官网查看详细文档

这里使用vue add element命令安装element-ui

再选择Fully import

PS：这里须要注意一点，使用vue add安装插件时，应确保当前项目提交最新，由于有可能会覆盖掉app.vue这个文件的部份内容，好比安装element，就会将app.vue的内容增长多一个按钮的显示，如图

那看到这个图，也就说明element-ui安装成功啦，而后就能够在各个组件里面，跟之前同样使用element了！