前置知識
- node安裝
- npm(yarn,cnpm)
- webpack(webpack-cli)
基於vue-cli3.0快速構建vue專案
本章詳細介紹使用vue-cli3.0來搭建專案。 本章使用vue-cli3.0構建的專案是基於webpack的模板檔案，構建後的專案屬於單頁面（SPA）應用。因此，該文件後續操作與說明不適用於構建一個多頁面應用。
相比於之前有如下優點：
- 功能豐富：對babel、Typescript、ESLint...提供開箱即用的支援
- 易於擴充套件：它的外掛系統可以讓社群根據需求構建和共享可複用的解決方案
- 無需Eject：vue cli 完全可配置的，無需再使用webpack配置
- CLI圖形化介面：vue ui圖形化介面建立、開發和管理專案
- 即刻建立原型：用單個vue檔案實現新的靈感
- 面向未來：為現代瀏覽器輕鬆產出原生的ES2015程式碼，或將你的vue元件構建為原生的Web Components元件
1、vue-cli3.0初始化
安裝@vue/cli
# npm install -g @vue/cli
OR
# yarn global add @vue/cli
複製程式碼你可以使用vue --version 或者 vue -V檢查其版本
- VUE CLI3的包名稱由
vue-cli改成@vue/cli。如果你已經安裝了舊版本的vue-cli(1.x或2.x)，你先通過npm uninstall vue-cli -g或yarn global remove vue-cli解除安裝它。 - VUE CLI3需要
node8.9或更高版本（推薦8.11.0+） - VUE CLI3和舊版本使用了相同的vue命令，所以Vue CLI2(vue-cli)被覆蓋了。如果你仍然需要使用舊版本的vue init 功能，你需要全域性安裝一個橋接工具：
npm install -g @vue/cli-init
Vue init webpack myVue
複製程式碼2、建立專案
可以使用
vue ui圖形化介面建立和管理專案，這裡不做闡述，請自行檢視cli.vuejs.org/，下面以命令列形式進行建立：
vue create vuedemo
複製程式碼你會被提示選取一個preset。你可以選預設的包含了基本的Babel+ESLint設定的preset，也可以選
手動選擇特性來選取需要的特性。
這個預設的設定非常適合快速建立一個新專案的原型，而手動設定則提供了更多的選項，它們是面向生產的專案更加需要的，下面以”手動設定“為例。
以上下鍵移動，以空格鍵進行是否選定
- Babel : 將ES6編譯成ES5
- TypeScript: javascript型別的超集
- Progressive Web App (PWA) Support: 支援漸進式的網頁應用程式
- Router:vue-router
- Vuex: 狀態管理
- CSS Pre-processors: CSS預處理
- Linter / Formatter: 開發規範
- Unit Testing: 單元測試
- E2E Testing: 端到端測試
如果後續你想在一個已經被建立好的專案中安裝外掛，可以使用 vue add 命令：
D:\i\vuedemo> vue add vuex
複製程式碼出現如上字樣，說明安裝成功。請輸入命令
cd vuedemo與yarn serve執行環境。
3、配置檔案說明
vue-cli3.0致力於Vue生態中的工具基礎標準化。它確保了各種構建工具能夠基於智慧的預設配置即可平穩銜接，這樣你就可以專注在撰寫應用上，減少配置的時間。檢視如下檔案，會發現相比於vue-cli2.0少了
build與config資料夾，所以vue-cli3提供了一個可選的配置檔案 ——vue.config.js。請具體參考4和5(打包配置)，這裡只詳細解讀檔案作用。
|-- dist # 打包後資料夾
|-- public # 靜態資料夾
| |-- favicon.ico
| |-- index.html #入口頁面
|-- src # 原始碼目錄
| |--assets # 模組資源
| |--components # vue公共元件
| |--views
| |--App.vue # 頁面入口檔案
| |--main.js # 入口檔案，載入公共元件
| |--router.js # 路由配置
| |--store.js # 狀態管理
|-- .env.pre-release # 預釋出環境
|-- .env.production # 生產環境
|-- .env.test # 測試環境
|-- vue.config.js # 配置檔案
|-- .eslintrc.js # ES-lint校驗
|-- .gitignore # git忽略上傳的檔案格式
|-- babel.config.js # babel語法編譯
|-- package.json # 專案基本資訊
|-- postcss.config.js # CSS前處理器(此處預設啟用autoprefixer)
複製程式碼4、vue.config.js配置
Vue.config.js是一個可選的配置檔案，如果專案的根目錄存在這個檔案，那麼它就會被
@vue/cli-service自動載入。你也可以使用package.json中的vue欄位，但要注意嚴格遵守JSON的格式來寫。這裡使用配置vue.config.js的方式進行處理。
const webpack = require('webpack')
module.exports = {
//部署應用包時的基本 URL
publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
//當執行 vue-cli-service build 時生成的生產環境構建檔案的目錄
outputDir: 'dist',
//放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
assetsDir: 'assets',
// eslint-loader 是否在儲存的時候檢查 安裝@vue/cli-plugin-eslint有效
lintOnSave: true,
//是否使用包含執行時編譯器的 Vue 構建版本。設定true後你就可以在使用template
runtimeCompiler: true,
// 生產環境是否生成 sourceMap 檔案 sourceMap的詳解請看末尾
productionSourceMap: true,
//允許我們更細粒度的控制 webpack 的內部配置,例如：以下操作我們可以成功修改 webpack 中 module 項裡配置 rules 規則為圖片下的 url-loader 值，將其 limit 限制改為 5M
chainWebpack: config => {
config.module.rule("images")
.use("url-loader")
.tap(options =>
merge(options, {
limit: 5120
}));
},
//可以在正式環境下關閉錯誤報告 console.log...
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 為生產環境修改配置...
} else {
// 為開發環境修改配置...
}
},
// css相關配置
css: {
// 是否使用css分離外掛 ExtractTextPlugin 生產環境下是true,開發環境下是false
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {},
// 啟用 CSS modules for all css / pre-processor files.
modules: false
},
// webpack-dev-server 相關配置
devServer: { // 設定代理
hot: true, //熱載入
host: '0.0.0.0', //ip地址
port: 8085, //埠
https: false, //false關閉https，true為開啟
open: true, //自動開啟瀏覽器
proxy: {
'/api': { //本地
target: 'http://192.168.102.13:8080/',
// 如果要代理 websockets
ws: true,
changeOrigin: true
},
'/test': { //測試
target: 'http://172.22.0.58:8082/'
},
'/pre-release': { //預釋出
target: 'http://XXX.com/'
},
'/production': { //正式
target: 'http://XXX.com/'
}
}
},
pluginOptions: { // 第三方外掛配置
// ...
}
}
複製程式碼擴充套件:
Source map的作用：針對打包後的程式碼進行的處理，就是一個資訊檔案，裡面儲存著位置資訊。也就是說，轉換後的程式碼的每一個位置，所對應的轉換前的位置。有了它，出錯的時候，除錯工具將直接顯示原始程式碼，而不是轉換後的程式碼。這無疑給開發者帶來了很大方便。
5、打包配置
在實際專案的開發中，我們一般會經歷專案的開發階段、測試階段、預釋出階段和最終上線階段，每一個階段對於專案程式碼的要求可能都不盡相同，那麼我們如何能夠遊刃有餘的在不同階段下使我們的專案呈現不同的效果，使用不同的功能呢？這裡就需要引入
環境的概念。
一般一個專案都會有以下 4 種環境：
- 開發環境（開發階段，本地開發版本，一般會使用一些除錯工具或額外的輔助功能）
- 測試環境（測試階段，上線前版本，除了一些 bug 的修復，基本不會和上線版本有很大差別）
- 預釋出環境（即將上線階段，上線前版本，預測線上出現問題的可能性，和上線版本無差別）
- 生產環境（上線階段，正式對外發布的版本，一般會進行優化，關掉錯誤報告）
作為一名開發人員，我們可能需要針對每一種環境編寫一些不同的程式碼並且保證這些程式碼執行在正確的環境中，這就需要我們進行正確的環境配置和管理。
建立.env.test檔案，檔案內容如下
NODE_ENV='test' # 測試環境
VUE_APP_TT='TT'
複製程式碼建立.env.pre-release檔案，檔案內容如下：
NODE_ENV='pre-release' # 預釋出環境
複製程式碼建立.env.production檔案，檔案內容如下：
NODE_ENV='production' # 正式環境
VUE_APP_T='la'
Q='1'
複製程式碼package.json配置
"scripts": {
"serve": "vue-cli-service serve ",
"build:pre": "vue-cli-service build --mode pre-release", #預釋出環境
"build:test": "vue-cli-service build --mode test", #測試環境
"build:prod": "vue-cli-service build --mode production", #正式環境
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
}
複製程式碼注意：
- 在vue.config.js使用
process.env.[name]進行訪問就可以了
// vue.config.js
console.log(process.env.NODE_ENV); // development（在終端輸出）
複製程式碼- 當你執行 yarn serve 命令後會發現輸出的是 development，因為 vue-cli-service serve 命令預設設定的環境是 development，你需要修改 package.json 中的 serve 指令碼的命令為：
"scripts": {
"serve": "vue-cli-service serve --mode test",
}
#--mode test其實就是修改了 webpack 4 中的 mode 配置項為 test，同時其會讀取對應 .env.[model]檔案下的配置，如果沒找到對應配置檔案，其會使用預設環境 development，同樣 vue-cli-service build 會使用預設環境 production。
複製程式碼有關環境變數的注意事項
- 環境名應該與環境檔案統一
- 環境檔案放置根目錄下
- 除了
baseUrl和NODE_ENV其他環境變數使用VUE_APP開頭
6、部署專案的跨域處理
專案打包後，進行上線，此時，vue專案在開發除錯模式下配置的跨域處理無效，此時跨域處理依賴要訪問後端服務的配置。
第一種解決方法後端增加CORS跨域資源共享，Java、.Net程式碼有區別，但是大體認是設定Http協議中的“origin”相關的屬性。
第二種方法設定後端的HTTP伺服器，對所有HTTP請求進行過濾，增加跨域CORS資源共享。
這兩種方式前端開發都無法介入，需要和後端服務提供的開發人員、部署服務的運維進行溝通說明。
githup地址：github.com/Mr-jili/vue…
請各位給給意見，查漏補缺，有哪些不足之處請給予意見。呸呸，文件需要上交領導---