Vue-cli 3.0入門

baiqb1990發表於2018-07-31
Vue

[2018-07-31更新]： vue-cli 3.0正式版的中文文件已經出來了，詳細的可以參考：https://cli.vuejs.org/zh/guide/

Vue CLI介紹

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供：

  • 通過 @vue/cli 搭建互動式的專案腳手架。
  • 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
  • 一個執行時依賴 (@vue/cli-service)，該依賴：
    • 可升級；
    • 基於 webpack 構建，並帶有合理的預設配置；
    • 可以通過專案內的配置檔案進行配置；
    • 可以通過外掛進行擴充套件。
    • 一個豐富的官方外掛集合，整合了前端生態中最好的工具。

Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基於智慧的預設配置即可平穩銜接，這樣你可以專注在撰寫應用上，而不必花好幾天去糾結配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性，無需 eject

1. 環境準備

1.1. 安裝Node.js （建議使用LTS版本）

1.2. nrm安裝及npm registry設定

// use npm
npm i nrm -g
// use yarn
yarn global add nrm
複製程式碼

檢視可用的npm源

nrm ls
複製程式碼

nrm檢視npm源.png

切換npm源(以使用taobao為例)

// 用法： nrm use ***
nrm use taobao
// 切換之後可用 nrm ls檢視是否已經切換了npm源
複製程式碼

nrm切換npm源.png

1.3. 安裝yarn

npm i yarn -g
複製程式碼

1.4. 安裝vue-cli 3.0

npm i @vue/cli -g
複製程式碼

2. vue-cli搭建指令碼檔案

以搭建一個專案名稱為vue-test的Vue前端專案為例

在終端輸入以下命令

vue create vue-test
複製程式碼

根據提示進行相應的配置（以手動配置為例）：

2.1. 選擇Manually select features

vue-cli-0.png

2.2. 選擇專案需要的一些特性（此處我們選擇需要Babel編譯、使用Vue路由、Vue狀態管理器、CSS前處理器、程式碼檢測和格式化、以及單元測試，暫時不考慮端到端測試(E2E Testing)）

vue-cli-1.png

2.3. 選擇CSS前處理器語言，此處選擇LESS

vue-cli-2.png

2.4. 選擇ESLint的程式碼規範，此處使用 Standard程式碼規範

vue-cli-3.png

2.5. 選擇何時進行程式碼檢測，此處選擇在儲存時進行檢測

vue-cli-4.png

2.6. 選擇單元測試解決方案，此處選擇 Jest

vue-cli-5.png

2.7. 選擇 Babel、PostCSS、ESLint等配置檔案存放位置，此處選擇單獨儲存在各自的配置檔案中

vue-cli-6.png

2.8. 配置完成後等待Vue-cli完成初始化

vue-cli-7.png

2.9. vue-cli初始化完成後，根據提示，進入到vue-test專案中，並啟動專案

// 進入到vue-test專案
cd vue-test
// - 啟動服務
yarn serve
// - 打包編譯
yarn build
// - 執行lint
yarn lint
// - 執行單元測試
yarn test:unit
複製程式碼

3. vue.config.js配置

3.1 vue.config.js介紹

此部分內容參考Vue-cli配置參考

vue.config.js是一個可選的配置檔案，如果專案的（和package.json同級的）根目錄中存在這個檔案，那麼它會被@vue/cli自動載入。你也可以使用package.json中的vue欄位，但是注意這種寫法需要你嚴格遵照JSON的格式來寫。

這個檔案應該匯出了一個包含了選項的物件

// vue.config.js
module.exports = {
  // 選項...
}
複製程式碼

3.2. 配置代理

如果你的前端應用和後端 API 伺服器沒有執行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 伺服器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置

devServer

  • Type: Object 所有webpack-dev-server的選項都支援.注意：
    • 有些值像host、port和https可能會被命令列引數覆寫
    • 有些像publicPath和historyApiFallback不應該被修改，因為它們需要和開發伺服器的baseUrl同步以保障正常工作

devServer.proxy

  • Type:string | object devServer.proxy可以是一個指向開發環境API伺服器的字串：
module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}
複製程式碼

這會告訴開發伺服器將任何未知請求 (沒有匹配到靜態檔案的請求) 代理到http://localhost:4000。

如果你想要更多的代理控制行為，也可以使用一個 path: options 成對的物件。完整的選項可以查閱 http-proxy-middleware 。

vue-cli2.0建立的專案的代理配置方式是修改config/index.js檔案中的proxyTable:

image.png

vue-cli3.0的代理配置，直接將proxyTable中配置copy到devServer.proxy中即可：

module.exports = {
  devServer: {
    proxy: {
     '/hrm/api': {
        //target: 'http://192.168.1.209:10751/', // Dev環境
        //  target: 'http://192.168.1.238:10751/', // Test環境
        // target: 'http://192.168.1.215:10751/', // Rls環境
        target: 'http://192.168.1.218:10751/', // 正式環境
        changeOrigin: true,
        autoRewrite: true,
        cookieDomainRewrite: true,
        pathRewrite: {
          '^/hrm/api/': '/'
        }
      }
    }
  }
}
複製程式碼

3.3. 配置Webpack其他選項

參考：webpack簡單的配置方式

調整webpack配置最簡單的方式就是在vue.config.js中的configureWebpack選項提供一個物件：

module.exports = {
  // 其他選項...
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
      //......
    ]
  }
}
複製程式碼

警告 有些 webpack 選項是基於 vue.config.js 中的值設定的，所以不能直接修改。例如你應該修改 vue.config.js 中的 outputDir 選項而不是修改 output.path；你應該修改 vue.config.js 中的 baseUrl 選項而不是修改 output.publicPath。這樣做是因為 vue.config.js 中的值會被用在配置裡的多個地方，以確保所有的部分都能正常工作在一起。

4. 升級已有專案到vue-cli 3.0版本

之前有考慮過通過將現有專案進行修改，安裝@vue/cli以及相關的包，發現行不通。其實，最簡單的方法，就是使用vue-cli 3.0，建立一個新的專案，然後將原有的專案的原始碼拷到新的專案中即可

  1. 使用vue-cli建立新的專案
  2. 刪除新專案中src下的內容
  3. 將原有專案src中的原始碼拷貝到新專案的src中
  4. 將原有專案的index.html及favicon.ico拷貝到新專案的public中
  5. 將原有的***static資料夾**也拷貝到新專案的public中
  6. 修改package.json、.babelrc等檔案，保持和原有專案一致即可
build之後靜態目錄存放位置區別：
vue-cli 2.0 vue-cli 3.0
存放在 dist/static下 存放於 dist/assets 下

注意： 使用vue-cli 2.x版本建立的專案，放在static下的檔案，build之後，是會拷貝到dist\static專案下的，所以，也必須要將static資料夾移到新專案的public資料夾中； 會有放在static目錄的，大部分是一些用於下載的，或者是大的圖片、庫等不需要編譯的 2.0腳手架預設生成的靜態檔案是放在dist/static下，3.0預設升成的靜態檔案是放在 dist/assets下的，但是對於專案的升級來說，影響不大

如下圖，原有專案的static中的histudy資料夾和wx.zip檔案，編譯後是會被拷貝到dist/static下的

image.png

vue-cli 3.0建立的專案，放在public目錄的，編譯時才會被拷貝到dist目錄中，具體的配置方法，可以通過vue.config.js去配置，有興趣的可以去研究研究 如下圖：src中的**.vue等檔案，編譯後生成的 img/css/js資料夾，都會被拷貝到dist/assets中，public中的檔案/資料夾會被拷貝到dist目錄下。為了不修改原有專案的程式碼，直接將原專案的static資料夾拷貝到新專案的public下即可。

image.png

相關文章