• 創建工程目錄
• ajax插件選擇
• 模擬ajax返回數據
• 跨域問題
• 優化webpack配置
• 增加babel-polyfill
• 增加路徑別名
• 修改單頁面應用根模板index.html位置
• 修改chunk文件名
• 完善各種類型的css-loader
• NEXT——路由篇
• 源碼
• 本系列目錄

創建工程目錄

在開始一切的講解前，我們先創建一個全新的工程。推薦直接使用vue官方提供的命令行工具vue-cli，它能快速的生成一個基於vue和webpack的單頁面應用。

# 全局安裝vue-cli
npm install vue-cli -g

# 選擇你的項目根文件夾
# e:
# cd vue-project

# 創建webpack項目
# vue init [vue-cli模板名稱] [項目文件夾]
vue init webpack my-project

# 安裝依賴
npm install
1
2
3
4
5
6
7
8
9
10
11
12
13

在安裝中有自動提示，要求輸入項目名稱、描述、作者、關鍵字、是否使用eslint、是否加入單元測試。有需求的話按照提示直接輸入或選擇即可，沒有需求的話一路按回車和Y就行了。

當完成上述步驟後，你就能夠在e:vue-projectmy-project中找到自動生成完畢的項目。然後大家可以根據實際需要或者編寫習慣來創建其中的具體目錄。以下為參考目錄：

|- src/
| |- assets/ // 靜態文件目錄：css、images等
| |- components/ // 組件文件目錄
| |- page/ // 具體業務頁面目錄
| |- router/ // vue-router的路由目錄
| |- store/ // vuex目錄
| |- util/ // 工具類目錄
|- main.js // webpack入口文件
|- App.vue // 入口頁面
1
2
3
4
5
6
7
8
9

ajax插件選擇

在jQuery時代，ajax的使用一般直接用jQuery自己提供的就好。但是當使用vue作為底層開發框架時，因很少再去直接操作DOM的關係，jQuery本身就很少被提及了。所以這裡推薦大家使用axios作為ajax插件，這也是vue官方所推薦的插件。axios的安裝和使用都很簡單，但其在項目中的具體配置會在今後的章節中涉及，此處不做詳細討論。現在我們只需要知道它能實現ajax就可以了。

模擬ajax返回數據

在實際的開發過程中，經常會遇到前端需要後端的數據，但後端並沒有完成該功能的情況。這種問題有很多種解決方案，比如搭建一個前後端公用的Mock Server。不過在項目前期如果沒有充足準備的話，對於前端同學來說，使用Mockjs來實現這個需求則更加方便、快速一點，和項目本身集成到一起，不用再搭建伺服器了。

注意：在本地項目中集成Mockjs，只應該用於前期開發或工作比較忙的時候，後期還是應該有統一的API測試平台，保證前後端都能通過該平台測試自己的功能，並能夠對API協議進行統一管理。

跨域問題

如果在開發過程中，ajax請求地址非本服務相同主機和相同埠，則會因瀏覽器自身的安全機制，導致出現跨域問題。解決該問題最好的方法是讓後台同學配置CORS，或者在webpack中設置proxyTable，或者自己搭建nginx服務進行反向代理。

這裡主要說一下關於webpack中proxyTable的設置（其實是vue-cli生成的項目自帶的配置項）。請注意，webpack的proxyTable只在開發環境中有效！以下說明均引用自vue-cli對webpack模板的說明，這裡為原文鏈接：vuejs-templates

在config/index.js中編輯dev.proxyTable項，以設置代理規則。在開發環境中，實際上使用的是http-proxy-middleware插件實現的代理功能，所以它的詳細用法你應該參考其官方文檔，這裡有個簡單的例子：

// config/index.js
module.exports = {
// ...
dev: {
proxyTable: {
// 所有以/api 為前綴的請求將被代理到http://jsonplaceholder.typicode.com
// 即 /api/getNav -> http://jsonplaceholder.typicode.com/getNav
"/api": {
target: "http://jsonplaceholder.typicode.com",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

優化webpack配置

vue-cli默認生成的項目工程雖然很全，但仍有一部分需要進行修改，以更好的適應實際開發。這裡僅列舉針對工程的全局修改，在實際開發中可能會有更多的修改，比如增加loader等

增加babel-polyfill

vue-cli默認生成的項目中自帶了babel-plugin-transform-runtime，其保證了一定的瀏覽器兼容性。但其存在兩個問題：

1. 非同步載入組件時，會產生 polyfill 代碼冗餘
2. 不支持對全局函數與實例方法的 polyfill
3. 介於以上兩種缺點，我們需要增加babel-polyfill，同時刪除babel-plugin-transform-runtime

在命令行中輸入以下命令

# 安裝babel-polyfill
npm install babel-polyfill --save

# 卸載babel-plugin-transform-runtime
npm uninstall babel-plugin-transform-runtime --save
1
2
3
4
5

修改文件.babelrc

"plugins": [
// "transform-runtime"
],
1
2
3

在入口文件main.js中引入babel-polyfill

import "babel-polyfill"
1

增加路徑別名

在實際開發中，某些路徑層級可能會很深，如果使用相對路徑可能會有無數的../../。為解決這種問題，我們可以增加路徑別名，以減少開發過程中路徑的複雜性。

修改文件：webpack.base.conf.js

resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
"vue$": "vue/dist/vue.esm.js",
"@": resolve("src"),
"util": "@/util",
"asset": "@/asset"
...
}
}
1
2
3
4
5
6
7
8
9
10

修改單頁面應用根模板index.html位置

webpack默認的根模板路徑與src目錄同級。但我更喜歡把根模板放置到src目錄中。如果你也有像我這樣的需求，那麼按以下修改即可

// 開發環境：webpack.dev.conf.js
new HtmlWebpackPlugin({
filename: "index.html",
// template: "index.html",
template: "./src/index.html",
inject: true
})

// 生產環境`webpack.prod.conf.js`
new HtmlWebpackPlugin({
filename: config.build.index,
// template: "index.html",
template: "./src/index.html",
...
}),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

修改chunk文件名

如果你不希望看到各種以數字開頭的文件名的話，可以按照以下方式修改。如果你覺得hash太長，也可以限定其長度

// webpack.prod.conf.js
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath("js/[name].[chunkhash].js"),
// chunkFilename: utils.assetsPath("js/[id].[chunkhash].js")
chunkFilename: utils.assetsPath("js/[name].[chunkhash:7].js")
}
1
2
3
4
5
6
7

完善各種類型的css-loader

在build/utils.js 中我們可以看到，vue-cli項目自動幫我們判斷了需要哪些css的loader。如果你想以後不再輕易動package.json的話，你完全可以把這些loader都安裝上。其中安裝sass-loader前需要提前安裝node-sass。安裝less-loader前需要安裝less。以下為安裝sass-loader和less-loader

npm install node-sass sass-loader less less-loader --save-dev
1

NEXT——路由篇

項目創建及配置完畢後，我們將開始編寫後台管理系統中最重要也是最基礎的部分——路由及其許可權。基於許可權的頁面跳轉將會是重中之重。

源碼

當前源碼地址：https://github.com/harsima/vue-backend

請注意，該源碼會不斷更新（因為工作很忙不能保證定期更新）

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！