當前位置:
首頁 > 知識 > Vue + ElementUI 後台管理網站基本框架之創建項目(附源碼)

Vue + ElementUI 後台管理網站基本框架之創建項目(附源碼)

  • 創建工程目錄
  • 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

請注意,該源碼會不斷更新(因為工作很忙不能保證定期更新)

Vue + ElementUI 後台管理網站基本框架之創建項目(附源碼)

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

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

XPath 簡介
VBScript 關鍵字

TAG:程序員小新人學習 |