開發前準備
- 首先全局安裝 vue-cli，通過
npm install -g @vue/cli或者yarn global add @vue/cli，安裝之后，可以通過在 cmd 中輸入vue --version來查看版本信息以驗證是否安裝成功 - 如果之前存在老版本的 vue-cli，當前安裝會覆蓋掉，所以如果想要保留老的版本，參考鏈接
初始化項目
cmd方式初始化
新建一個工作目錄，shift + 鼠標右鍵，打開命令行界面，vue create [app-name]，按照提示來選擇即可，參考鏈接
高級選項： vue create [app-name] -p [preset-name] 可以指定一個預設，來快速創建一個成熟的項目模板，但是在此之前需要有配置好的預設，該預設可以是一個 git 地址或者保存在本地中的 .vuerc 中的預設或者一個相對或者絕對路徑的
.json文件，后面詳細講解預設的配置和作用
ui界面方式初始化
新建一個工作目錄，打開命令行界面，輸入
vue ui回車后，會自動打開默認瀏覽器，啟動一個 ui 界面來指導創建 vue 項目，包含插件，依賴項以及配置項的安裝，還提供了啟動開發服務器和打包構建的功能只要是通過
vue-cli3初始化一個項目之后，在任何地方都可以通過命令行界面輸入vue ui來管理所有通過vue-cli3初始化的項目
預設的作用以及配置
預設的作用
通過 vue create [app-name] 初始化項目的最后一步，會提示是否將項目配置保存起來，默認保存位置為 home >.vuerc，這個就是項目配置中的預設，在下次創建項目的時候，想要快速搭建完整的項目模板，而不是為插件和依賴以及配置項頭疼的話，就可以在初始化項目的時候通過 vue create [app-name] -p [preset-name] 來為當前項目指定預設（如果你之前保存有預設的話），或者通過 vue create [app-name] 直接創建項目，vue-cli 會讀取保存的 .vuerc 文件中保存的預設，可以手動選擇你想要的預設（如果你之前保存有預設的話）， 里面保存的內容會被 vue 插件的生成器生成對應的項目文件以及合并配置項等
預設的配置項
{
// 包管理工具，根據你在通過 cli3 初始化項目時指定而設置，可修改
"packageManager": "yarn",
"presets": {
// 當前預設名稱，例如： vue create [app-name] -p VuePreset，為當前項目應用該預設
"VuePreset": {
// 01-當該值為 true 的時候，初始化項目的時候會在構建目錄中生成對應的配置文件
// 如：瀏覽器兼容范圍配置文件 .browserslistrc，eslint 配置文件 .eslintrc.js，postcss 配置文件 postcss.config.js
// 當前預設如果有 configs 項，那么該項內容會被合并到 vue.config.js 文件中
// 02-如果該值為 false，那么會在各配置項會集中到 package.json 文件中，為了更好的管理，建議設置為 true
"useConfigFiles": true,
// 插件配置項
// 插件的作用 TODO
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-pwa": {},
// 不同插件配置項可能不同，以以下插件為例，簡單說明插件配置
"@vue/cli-plugin-eslint": {
// 為當前插件顯示指定安裝的版本范圍或者某一具體版本，推薦
"version": "^3.0.1",
// 為使用預設的項目開啟當前插件的提示，以當前插件為例，會提示開發者重新選擇檢驗規則，如果該項存在且為 true，那么優先級最高，即會通過提示覆蓋掉當前插件默認的配置，如果你是項目構建者身份，建議該項不設置或者設置為 false
"prompts": true,
// eslint 插件校驗的標準可選項為四種，分別為
// 01-Eslint with error prevention only，僅帶有錯誤語法提示的校驗；
// 02-ESLint + Airbnb config，在使用 Airban 公司前端開發規范配置的基礎上進行校驗；參考鏈接：http://airbnb.io/javascript
// 03-ESLint + Standard config，標準校驗規則，參考鏈接：https://standardjs.com
// 04-ESLint + Prettier，使用 Prettier 風格的校驗，參考鏈接： https://prettier.io/，https://github.com/prettier/prettier
// 05-針對四種配置規格，config 的可選擇分別為 base, airbnb, standard, prettier，可手動修改你喜歡的校驗風格，參考鏈接：https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-eslint/prompts.js
"config": "standard",
// 校驗時機，可選擇在保存時校驗以及使用 git add 命令時候校驗
"lintOn": [
"save",
"commit"
]
}
},
// 如果該項存在并包含 vue 字段，會在項目根目錄生成 vue.config.js 文件，用作整個項目的配置文件
"configs": {
// 該字段中的配置項會被合并到 vue.config.js 文件中，如果你想構建對于項目通用的配置，可以在預設中設置好，免去一些費時的配置，參考鏈接：https://cli.vuejs.org/zh/config/#vue-config-js，關于更多的可配置項參考鏈接：https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/options.js
"vue": {
"css": {
// 是否抽離 css 樣式，生成環境為 true，開發環境為 false，需要單獨在 vue.config.js 文件中配置，這里只是配置的解釋說明
"extract": process.env.NODE_ENV === 'production',
// 以 css 模塊化導入 css 文件或其他預處理文件（exp:stylus）
"modules": false,
// 關閉 css 的源碼映射，提升構建新性能
"sourceMap": false,
// 為 css 預處理器添加配置項，參考鏈接：https://cli.vuejs.org/zh/guide/css.html
"loaderOptions": {}
},
// 只在開發環境下，使用 eslint-loader 在保存文件時校驗，需要單獨在 vue.config.js 文件中配置，這里只是配置的解釋說明
"lintOnSave": process.env.NODE_ENV !== 'production',
// 生產環境關閉源碼映射，提升構建性能
"productionSourceMap": false,
// 如果有依賴需要 babel 轉譯或者需要 polyfill，可將 node_modules/ 下面的依賴項放入該數組，支持字符串名稱或者正則表達式
"transpileDependencies": [],
// 參考下面的講解到的 webpack 配置項
"configureWebpack": {},
// 配置開發服務器
"devServer": {
"host": "localhost",
"port": 2019,
"hot": true,
"hotOnly": false,
"open": true,
"https": false,
// 編譯或者 eslint 校驗出現警告或者錯誤時，瀏覽器只顯示錯誤覆蓋層
"overlay": {
"warnings": false,
"errors": true
}
}
}
},
// 該值為 true，在初始化的時候會添加 router 依賴
"router": true,
// 該值為 true，開啟 history 模式，否則回退到 hash 模式
"routerHistoryMode": true,
// 該值為 true，在初始化的時候會添加 vuex 依賴
"vuex": true,
// 該項指定 css 預處理器，可支持 less，sass，stylus
"cssPreprocessor": "stylus"
}
}
}
關于預設中的 webpack 選項
在預設的 config.vue 選項中存在兩個關于 webpack 的配置項（configureWebpack、chainWebpack），因為這個關乎整個項目的構建，所以單獨拿出來說一下，你可以查看官網的對此用法說明webpack相關。想要修改項目中 webpack 的配置，需要先知道，構建好的項目中，已經包含配置的有哪些，才能夠針對性的調整，這就需要你得獲取到 webpack.config.js 中的內容。
- 關于查看構建好的項目已有的
webpack配置，第一種是可以通過vue.config.js里面的configureWebpack或者chainWebpack，以函數的形式來查看，這兩者都可以接受一個已經解析好的配置作為參數的函數； - 參照第一種方法查看已經解析好的配置項
vue.config.js.png
wepack.config.js-1.png -
第二種是通過
vue inspect的命令行方式查看，也可以將當前的配置項輸出，vue inspect > webpack.config.js，當然也可以通過package.json文件的scripts中添加命令來實現"inspect": "vue-cli-service inspect > webpack.config.js" - 參照第二種方法查看已經解析好的配置項，建議使用該種方法查看已生成的配置項，因為里面有配置的指導
package.json.png
wepack.config.js-2.png
可以看到相關的配置和使用之前老版本的腳手架配置沒有區別的，只需要你在vue.config.js中配置修改或者增加，例如config.resolve.alias、config.resolve.extensions，config.plugins.push(other plugin)等操作，但是對于細顆粒度的控制，可以通過chainWebpack來控制。 - 下面以
chainWebpack選項中的配置別名為例，簡單說明用法
首先在vue.config.js中配置好別名
webpack.alias-1.png
設置對應的文件
webpack.alias-2.png
在單文件組件中import
webpack.alias-3.png
視圖中即可顯示導入的name
webpack.alias-4.png
更多的關于chainWebpack選項的配置，可查看webpack-chain參考鏈接 - 修改
vue.config.js文件之后需要每次手動yarn serve，這里提供npm包：nodemon來監聽配置文件的變化，如果配置修改了，就重新執行yarn serve：nodemon --watch vue.config.js --exec yarn serve。nodemon參考鏈接。
遠程預設的獲取
如果你想加載遠程預設，即遠程倉庫（github、gitlab、Bitbucket ）中配置的預設，可以通過vue create -p username/repo [app-name]來初始化一個項目，下面是加載個人git倉庫中配置的預設（你也可以直接 copy 過去在cmd中粘貼、回車即可）：vue create -p https://github.com:huxianghe/vue-cli3 vue-cli3。加載遠程預設參考鏈接
項目環境的配置
環境變量類型
在 Vue CLI 2 甚至更早的腳手架中，環境變量是在 config/*.env.js 中手動指定好，但是在 @vue/cli 搭建的項目中，環境變量是根據 mode 來設置的，除非你手動修改，mode 值有三種： development，production，test，所以對應的環境變量 NODE_ENV 也有三種。例如在你鍵入 npm run serve 或者 yarn serve 命令的時候，默認進入 development 模式了。
環境變量配置
通常我們會基于當前的環境變量做一些事情，例如后臺接口地址的管理，開發模式，預發布模式，生產模式接口不會相同，所以，我們有時候會基于環境配置額外的環境變量，并且該變量需要打包到客戶端，就像在 Vue CLI 2 中，通過 webpack.DefinePlugin 將 process.env 嵌入到客戶端中一樣。但是在 cli3 搭建的項目中，是沒有 config 文件夾的，所以你想修改環境變量配置，需要在項目根目錄設置 .env 文件，參考鏈接，針對不同開發環境，設置不同的文件，這會保證該文件中的變量只在當前模式下加載（exp: .env.development，env.production），并且需要注意，只有 VUE_APP_ 開頭的變量才會被添加到process.env 中，并且被 webpack.DefinePlugin 插件嵌入到客戶端中，下面是配置文件的示例：
-
創建環境配置文件
env.config.png -
開發環境配置
env.development.png -
測試包環境配置
env.testing.png -
正式包環境配置
env.production.png - 尤其是在使用
vue ui方式管理項目的時候，可以讓你更加直觀的知道自己項目構建情況，如果你在構建命令中添加了--report，也可以打開構建好的項目下的report.html文件來查看項目的構建情況。
build-analysis.png
寫在最后
- 基于
@vue/cli初始化項目的較為完整配置，已放置到個人 git倉庫，你可以直接clone下來 - 本文為原創文章，如果需要轉載，請注明出處，方便溯源，如有錯誤地方，可以在下方留言。
