Vue-cli 3.0入門

[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
複製代碼

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

// 用法： nrm use ***
nrm use taobao
// 切換以後可用 nrm ls查看是否已經切換了npm源
複製代碼

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

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

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

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

2.5. 選擇什麼時候進行代碼檢測，此處選擇在保存時進行檢測

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

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

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

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:

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下的

vue-cli 3.0建立的項目，放在public目錄的，編譯時纔會被拷貝到dist目錄中，具體的配置方法，能夠經過vue.config.js去配置，有興趣的能夠去研究研究 以下圖：src中的**.vue等文件，編譯後生成的 img/css/js文件夾，都會被拷貝到dist/assets中，public中的文件/文件夾會被拷貝到dist目錄下。爲了避免修改原有項目的代碼，直接將原項目的static文件夾拷貝到新項目的public下便可。