在vue 2.9.6中，搭建vue-cli腳手架的流程是這樣的：  首先 全域性安裝vue-cli，在cmd中輸入命令:

npm install --global vue-cli 

安裝成功： 

安裝完成之後輸入 vue -V（注意這裡是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。 

然後就可以構建專案了，依次輸入命令：

1. vue init webpack “名稱”
2. cd 名稱（進入到建立的專案中）
3. npm install (安裝專案的依賴)
4. npm run dev (啟動專案)

然後在瀏覽器中輸入localhost:8080就可以啟動我們建立的專案啦

此時，我們在 package.json

構建好的專案目錄是這樣的： 

Vue CLI 3.0搭建

如今，官方文件已經升級3.0，在 vue-cli 3.0中，我們需要重新配置：

如果你已經安裝了vue 2.9.6 的話，則需要先將其刪除：指令為：npm uninstall -g vue-cli 

提示：Vue CLI要求Node.js版本8或者更高（8.10.0+ 推薦）。 

第二步：更新Vue-cli 指令：npm install -g @vue/cli 或 cnpm install -g @vue/cli 或 yarn global add @vue/cli  （這裡我用的 cnpm 安裝的，國內的淘寶映象速度會快許多…），安裝成功則顯示： 

安裝之後，記得檢視版本號：檢視版本（是否安裝成功）：vue -V (大寫的V) 

接下來就可以構建專案了，輸入指令：vue create test （test為專案名）；

與 2.0 不同的是這裡不再是選擇模板，而是預設 presets 

預設配置

• 選擇 [預設] 將直接開始安裝 

自定義配置

• 選擇 [自定義]  方向鍵上下移動，空格選中，Enter確定，自定義配置中，您將會看到這些配置項： 

自定義細節配置

1. 是否使用class風格的元件語法 
2. 是否使用babel做轉義 
3. 選擇CSS預處理型別 
4. 選擇語法檢測規範 
5. 選擇 儲存時檢查 / 提交時檢查 
6. 選擇配置資訊存放位置，單獨存放或者併入package.json 
7. 是否儲存當前預設，下次構建無需再次配置 

完成安裝 

3.0 的基本目錄結構相對 2.0 精簡了不少 （應該說是最精簡的目錄了～） 

public相當於原來的static，裡面的index.html是專案的入口  src同以前一樣

cli3.0沒有build和config了，  想要配置的話，需要在專案根目錄下建立vue.config.js檔案  (反正官方文件這麼說~)

再看一下 src 裡面的目錄結構： 

配置檔案去哪了？

之前的build和config資料夾不見了，那麼應該如何配置 如webpack等的配那？  只需要在專案的根目錄下新建 vue.config.js 檔案（是根目錄，不是src目錄）

語法

module.exports = {
 // 基本路徑
 baseUrl: '/',
 // 輸出檔案目錄
 outputDir: 'dist',
 // eslint-loader 是否在儲存的時候檢查
 lintOnSave: true,
 // use the full build with in-browser compiler?
 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 compiler: false,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // vue-loader 配置項
 // https://vue-loader.vuejs.org/en/options.html
 vueLoader: {},
 // 生產環境是否生成 sourceMap 檔案
 productionSourceMap: true,
 // css相關配置
 css: {
  // 是否使用css分離外掛 ExtractTextPlugin
  extract: true,
  // 開啟 CSS source maps?
  sourceMap: false,
  // css預設器配置項
  loaderOptions: {},
  // 啟用 CSS modules for all css / pre-processor files.
  modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 // 是否啟用dll
 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 dll: false,
 // PWA 外掛相關配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相關配置
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  proxy: null, // 設定代理
  before: app => {}
 },
 // 第三方外掛配置
 pluginOptions: {
  // ...
 }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55

例如： 

在package.json中自行檢視配置的詳細資訊， 

然後輸入指令執行專案即可： npm run serve ——執行指令 npm run lint ——語法檢測&自行修復

成功跑起來之後是這樣的：