資訊專(zhuān)欄INFORMATION COLUMN
摘要：簡(jiǎn)介最近寫(xiě)了一個(gè)基于權(quán)限管理系統(tǒng)的后臺(tái)模板，包含了正常項(xiàng)目開(kāi)發(fā)所需的框架功能，開(kāi)發(fā)者使用的時(shí)候只需要專(zhuān)注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。
簡(jiǎn)介
最近寫(xiě)了一個(gè)基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺(tái)模板，包含了正常項(xiàng)目開(kāi)發(fā)所需的框架功能，開(kāi)發(fā)者使用的時(shí)候只需要專(zhuān)注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。
源碼地址：
github：https://github.com/Nirongxu/v...
碼云：https://gitee.com/nirongxu/xu...
預(yù)覽地址：https://nirongxu.github.io/vu...
vue-xuAdmin是基于vue2.0全家桶 + element-ui 開(kāi)發(fā)的一個(gè)后臺(tái)模板，實(shí)現(xiàn)了無(wú)限級(jí)菜單，頁(yè)面、按鈕級(jí)別的權(quán)限管理，為了減少前后端的溝通成本，頁(yè)面、按鈕級(jí)別的權(quán)限驗(yàn)證和動(dòng)態(tài)路由表的存儲(chǔ)校驗(yàn)，也都由前端完成，這樣前端新建頁(yè)面或者刪除頁(yè)面都不需要告訴后臺(tái)去增加刪除路由表
部分截圖-開(kāi)發(fā)環(huán)境
node.js v8.0+
webpack v3
git
-技術(shù)棧
ES6+
vue2.0+
vue-router
vuex
axios
scss
element-ui v2.4+
3. 基礎(chǔ)框架功能- 登錄、退出
+ 基于token
- 狀態(tài)攔截、404頁(yè)面
- 動(dòng)態(tài)加載路由
- 頁(yè)面、按鈕指令權(quán)限管理
- 無(wú)限級(jí)菜單
- 封裝vue-i18n@8.x國(guó)際化組件
- 系統(tǒng)全屏化
- 菜單收縮
- icon 圖標(biāo)
+ tab標(biāo)簽導(dǎo)航
- 右擊快捷功能
- 表格拖拽排序
- 編輯器
- markdown（編輯器目前只封裝了這一個(gè)組件，重寫(xiě)了markdown編輯和預(yù)覽的皮膚，實(shí)時(shí)獲?。簃arkdown，html，json 三種格式文本）
- Echarts 組件封裝
封裝了一些element-ui沒(méi)有但是常用的組件，正常需要的功能element-ui里面都有，可以直接復(fù)制，如果element-ui不能滿足你的需求只有自己寫(xiě)了
4. 開(kāi)發(fā)
登錄
登錄頁(yè)面只有輸入賬號(hào)密碼，需要驗(yàn)證碼的可以自行去搜第三方驗(yàn)證插件，有收費(fèi)有免費(fèi)。這里僅為了測(cè)試，就把輸入的賬號(hào)當(dāng)做 token 來(lái)存儲(chǔ)，完成整個(gè)系統(tǒng)的會(huì)話，實(shí)際開(kāi)發(fā)以登錄成功后后臺(tái)返回的 token 為準(zhǔn)
// 登錄頁(yè)面
submitForm () {
let that = this
if (this.loginForm.username === "" || this.loginForm.password === "") {
this.$message({
showClose: true,
message: "賬號(hào)或密碼不能為空",
type: "error"
})
return false
} else {
// 將 username 設(shè)置為 token 存儲(chǔ)在 store，僅為測(cè)試效果，實(shí)際存儲(chǔ) token 以后臺(tái)返回為準(zhǔn)
that.$store.dispatch("setToken", that.loginForm.username).then(() => {
that.$router.push({path: "/"})
}).catch(res => {
that.$message({
showClose: true,
message: res,
type: "error"
})
})
}
},
// vuex
state: {
token: Cookies.get("token") // 防止刷新頁(yè)面或者在新標(biāo)簽頁(yè)打開(kāi)，從cookie獲取初始token
},
mutations: {
setToken (state, token) {
state.token = token
Cookies.set("token", token ,{ expires: 1/24 }) // 引用‘js-cookie’模塊，存儲(chǔ) token 到cookie
}
},
actions: {
setToken ({commit}, token) {
return new Promise((resolve, reject) => {
commit("setToken", token)
resolve()
})
}
},
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/100077.html
摘要：直接上預(yù)覽鏈接基于換膚自定義主題項(xiàng)目增加主題組件在項(xiàng)目的下添加文件夾文件獲取地址項(xiàng)目增加自定義主題自定義添加主題下載地址項(xiàng)目引入和使用選擇你想要隨主題改變的元素在里面，不希望隨主題改變的可以注釋掉選擇皮膚之后把記錄存在里面。 0. 直接上 預(yù)覽鏈接 [vue2.0-基于elementui換膚[自定義主題]](https://mgbq.github.io/vue-pe... 1. ...
摘要：直接上預(yù)覽鏈接基于換膚自定義主題項(xiàng)目增加主題組件在項(xiàng)目的下添加文件夾文件獲取地址項(xiàng)目增加自定義主題自定義添加主題下載地址項(xiàng)目引入和使用選擇你想要隨主題改變的元素在里面，不希望隨主題改變的可以注釋掉選擇皮膚之后把記錄存在里面。 0. 直接上 預(yù)覽鏈接 [vue2.0-基于elementui換膚[自定義主題]](https://mgbq.github.io/vue-pe... 1. ...
最近嘗試使用vue+element實(shí)現(xiàn)增刪改查功能，在實(shí)現(xiàn)的過(guò)程中遇到了蠻多問(wèn)題，現(xiàn)在總結(jié)如下：首先安裝相關(guān)的插件1、根據(jù)vue官網(wǎng)推薦，使用axios進(jìn)行前后臺(tái)交互，安裝axiosnpm install axios -S2、安裝elementUI，官網(wǎng)npm i element-ui -S3、安裝 loader 模塊npm install style-loader -Dnpm install c...
閱讀 3533·2021-10-13 09:40
閱讀 2655·2021-10-08 10:17
閱讀 4083·2021-09-28 09:45
閱讀 1006·2021-09-28 09:35
閱讀 1883·2019-08-30 10:51
閱讀 2967·2019-08-26 12:11
閱讀 1707·2019-08-26 10:41
閱讀 3152·2019-08-23 17:10
