@vue/cli 3.0 實打實的介紹

yelingfeng發表於2018-04-02
Vue

vue-cli 3.0

環境安裝

全新版本的腳手架、逼格非常高、 記住這個名字 @vue/cli


   npm install -g @vue/cli

   yarn add global @vue/cli

複製程式碼

建立專案

這裡對比下以前2.X之前的版本 ，新版本把外掛以及模板等 移植到命令列介面了.

舊版 建立命令
2.x vue init
3.x vue create

配置專案外掛和功能

這裡就很傻瓜了， 你要整合什麼 就選就行了。我這裡選個我比較常用的。

  • TypeScript
  • PWA
  • Vue-router
  • Vuex
  • CSS預處理
  • eslint prettier
  • 自動化測試單元測試 、e2e

@vue/cli 3.0 實打實的介紹

啟動專案

  1. 進入目錄,啟動專案 這裡 vue-cli 3.x 預設會開啟瀏覽器 地址也會打在控制檯。
   
   yarn serve 
   // OR
   npm run serve
複製程式碼

@vue/cli 3.0 實打實的介紹

專案分析

整體目錄 比 2.x之前 是精簡了不少

@vue/cli 3.0 實打實的介紹

去掉了2.x build和config等目錄 ,大部分配置 都整合到vue.config.js這裡了

vue.config.js裡 大概包括了配置 常用的輸出路徑名、跟目錄、預處理、devServer配置、pwa、dll、第三方外掛等等 詳細配置可以看官方文件 詳細config配置

靈活配置

1. 伺服器配置修改

這裡我先改個埠, 修改vue.config.js 然後重新啟動工程 , 可以看到已經改成5999埠了

module.exports = {
  lintOnSave: false,
  devServer: {
    port: 5999
  }
}
複製程式碼

2. 常用webpack配置修改

webpack的配置在這個屬性裡修改configureWebpack

包括plugins也可以自己擴充套件 ，本身尤大已經把常用的都封裝了 ，不滿足可以自行擴充套件。


這裡改個webpack devtool輸出方式、預設那個我屬實不知道怎麼跟蹤程式碼

configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
        config.devtool = 'source-map'
        // mutate config for production...
    } 
}

複製程式碼

其他配置 就不一一介紹了 具體可以看這裡webpack

3. 全域性變數的設定

在專案根目錄 建立二個檔案

.env.development .env.production

裡面配置鍵值對就行了

但要注意 這裡必須以VUE_APP開頭

這樣我們就可以自定義個全域性變數在某個模式下

    VUE_APP_MOCK_URL = 'http://xxxx.xxx.xx.xx/mockjs/'
複製程式碼

比如這樣在axios中就可以配置根路徑了


const service = axios.create({
    baseURL: process.env.VUE_APP_MOCK_URL
})

複製程式碼

參考文獻資料

相關文章