一、安裝 @vue/cli

更新到 3.x 之後，vue-cli 的包名從vue-cli 改成了 @vue/cli

如果之前全域性安裝了舊版本的vue-cli (1.x 或 2.x)，首先需要使用以下命令解除安裝掉

// 如果沒有安裝舊版本的 vue-cli 可以跳過解除安裝直接安裝

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

然後重新安裝新版本的 @vue/cli

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

安裝完成後，可以使用 vue -V

二、建立專案的三種方式

1.x和 2.x的vue-cli 採用 init 命令建立專案

vue init webpack project-name

3.x也支援這種方式，其執行結果和以前一樣，

但剛入行的前端萌新可能還不習慣命令列的構建方式

於是 vue/cli 3.x 新增了圖形化的方式來建立專案

首先還是得在指定目錄下開啟終端，然後執行：

vue ui

然後瀏覽器會開啟一個頁面，可以按照頁面將的引導建立專案

不過我還是建議使用命令列工具，這才符合一個程式設計師的身份嘛

vue create project-name
 

這裡的project-name是自定義的專案名稱，命令執行之後，會生成對應資料夾

三、引數詳解

使用 create 命令建立專案的時候，有很多配置項需要選擇

如果對某項配置項不熟悉，可以直接選擇第一個選項

首先需要選擇模組

如果選擇預設選項 default，將會構建一個最基本的 vue 專案（沒有 vue-router 也沒有 vuex）

這裡推薦選擇第二項Manually select features

然後根據自己的需求，使用空格鍵選擇具體的模組

如果不熟悉上面的模組分別代表什麼，可以先按照上圖的示意勾選模組

這樣就會建立一個包含vue-router

勾選之後，使用回車鍵進入下一步

這裡需要選擇路由模式，yes 是 history模式，no 是 hash模式

萌新可以先從 hash 模式入手，不過實際專案通常採用 history 模式

然後選擇一個合適CSS 的預編譯工具

都不熟悉的話就選 sass 或者 less，因為 stylus不支援原生CSS 寫法

後面還需要選擇ESLint的校驗規則，格式化的時機，和各個外掛的配置項的位置，不熟悉的話就選第一個

然後就有了這樣的過程：

最後選擇是否將配置項儲存為預設，然後配置完成，開始生成專案

專案生成之後，已經自動安裝了相關的依賴項，這時候可以直接啟動專案：

npm run serve

四、vue.config.js

完成以上步驟之後，就已經可以開發vue專案了，但無法滿足定製化的開發需求

這時候就需要手動建立一個 **vue.config.js，**官方的配置文件可以參考這裡

這裡我貼一個常用的vue.config.js

// vue.config.js
module.exports = {
  baseUrl: '/',
  outputDir: 'dist', // 打包的目錄
  lintOnSave: true, // 在儲存時校驗格式
  productionSourceMap: false, // 生產環境是否生成 SourceMap
 devServer: {
    open: true, // 啟動服務後是否開啟瀏覽器
    host: '0.0.0.0',
    port: 8080, // 服務埠
    https: false,
    hotOnly: false,
    proxy: null, // 設定代理
    before: app => {}
  },
}

vue.config.js 還有很多很厲害的配置項

比如構建多頁面應用的 pages、改造為 pwa 的配置項 pwa、高階CSS打包方案 css

這裡就不細說了，如果有興趣可以仔細研究官方文件

五、環境變數

有過一定開發經驗的小夥伴都知道，一個專案通常有三種模式：

開發模式 development、測試模式 test、生產模式 production

而開發中通常會根據環境變數 NODE_ENV 來進行區分這三種開發模式

然後通過很多的switch... case 來判斷

而 3.x的專案中就不需要寫switch...case了

直接在根目錄下建立以.env為字首的檔案

這裡的.env 檔案儲存的是公用引數，可以在所有模式中獲取到

而其他檔案中的引數，只能在對應模式中獲取到

比如 .env.development 中的引數，就只有在development 模式下生效

然後在檔案內新增對應的鍵值對

然後在 package.json 的 scripts 命令中新增對應的mode

// serve、bulid 都有預設的模式，但最好是將模式顯式的展現在配置項中

然後就能在專案中獲取到對應模式下的值

關於環境變數和模式的詳情，可以參考官方文件
出處：https://www.jianshu.com/p/51e5356c69fe