（小白篇）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了！