Vue 3.0項目搭建

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

作者：WHU_凌晨_Bin
鏈接：https://www.jianshu.com/p/6307c568832d
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。