一、VueCli構建工具

如果我們所有的專案都像原來那樣配置，難免過於繁瑣。所以Vue官方提供了一個構建工具——VueCli來快速構建一個工具 。他可以幫助我們快速安裝webPack的外掛、loader等等配套的包。以及幫我們自動化構建配置目錄等等。

二、VueCli 2.x

雖然在2018年8月尤雨溪釋出了VueCli 3，但是由於現在還有大量的專案都是通過2.x.x版本構建的。所以在此需要記錄一下VueCli 2的一些特性。

• 安裝

npm i @vue/cli -g

雖然是3版本，如果想像2版本那樣構建，需要使用他們提供的一個橋接工具

npm i @vue/cli-init -g

• 構建一個Vue專案(2版本)

vue init webpack 專案名稱

• 接下來要你選擇一些關鍵項

? Project name (test)   ##填寫專案檔名稱

? Project description (A Vue.js project)  ## 填寫專案介紹

? Author MaoJacky <34392872+[email protected].noreply.github.com>   ## 填寫作者資訊，預設讀取全域性git中的資訊

? Vue build  ## 選擇一個構建方式，初學者建議選擇第一個，後文有介紹這兩種方式的區別
  > Runtime + Compiler:
 
 recommended for most users
        Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
  
? Install vue-router? (Y/n) n   ## 是否載入Vue-router

? Use ESLint to lint your code? No   ## 是否使用一種js程式碼標準

?
 
 Setup unit tests No   ##是否安裝單元測試

? Setup e2e tests with Nightwatch? (Y/n) n   ##是否安裝端對端測試

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)   ##選擇一種包管理工具
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

• 生成後的目錄

│  .babelrc
│  .editorconfig
│  .gitignore
│  .postcssrc.js
│  index.html
│  package.json
│  README.md
│
├─build
│      build.js
│      check-versions.js
│      logo.png
│      utils.js
│      vue-loader.conf.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│
├─config
│      dev.env.js
│      index.js
│      prod.env.js
│
├─src
│  │  App.vue
│  │  main.js
│  │
│  ├─assets
│  │      logo.png
│  │
│  └─components
│          HelloWorld.vue
│
└─static
        .gitkeep

構建完成