- 創建工程目錄
- 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-project\my-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，其保證了一定的瀏覽器兼容性。但其存在兩個問題：
- 異步加載組件時，會產生 polyfill 代碼冗餘
- 不支持對全局函數與實例方法的 polyfill
- 介於以上兩種缺點，我們需要增加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
請注意，該源碼會不斷更新（因為工作很忙不能保證定期更新）
閱讀更多 程序員小新人學習 的文章
