使用vue3.0和element实现后台管理模板
通過自己所學(xué)的這段時(shí)間，利用空余時(shí)間，使用vue3.0腳手架搭建的一個(gè)關(guān)于后臺(tái)的管理模板，所實(shí)現(xiàn)功能也是模仿一個(gè)后臺(tái)的界面，數(shù)據(jù)分為兩種存放，一種是直接存儲(chǔ)到mlab,這里的數(shù)據(jù)是存放這登錄注冊(cè)，只有注冊(cè)了自己的賬號(hào)才能訪問到頁面，另一些數(shù)據(jù)直接存放在easy-mock里，
源碼地址:https://github.com/MrZHLF/vue-admin
自己需要搭建vue3.0的腳手架，在這里就不用講關(guān)于vue3.0的腳手架怎么搭建。vue3.0腳手架需要node版本10以上，這樣的話，可以使用nvm來管理自己的node版本，直接通過官網(wǎng)https://github.com/coreybutler/nvm-windows/releases。通過下載包進(jìn)行安裝，然后環(huán)境配置就可以使用了
- 比例安裝 nvm install? 10.10.0 node10的版本和? nvm install? 10.14.2兩個(gè)版本
- 當(dāng)我們切換的是可以使用 nvm use 10.10.0，這樣就切換到10.10.0的版本了
?一寫登錄注冊(cè)的數(shù)據(jù)，是使用node+mongodb去完成編寫的，登錄注冊(cè)的數(shù)據(jù)存放到mlab里面
效果展示
?
相關(guān)技術(shù)
1.使用vue3.0最新腳手架搭建環(huán)境
2.axios:數(shù)據(jù)請(qǐng)求
3.element-ui:基于vuejs2.0的ui組件庫。
4.vuex:是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。
5.vue-router:一般單頁面應(yīng)用spa都要用到的前端路由。
6.moment:時(shí)間日期格式
7.echarts：炫酷的圖表庫插件
8.vue-quill-editor：一款優(yōu)秀的富文本編輯器
9.mavon-editor:一款Markdown編輯器
10.jwt-decode：用于解析token
實(shí)現(xiàn)功能
1..實(shí)現(xiàn)數(shù)據(jù)的增刪改查
2.請(qǐng)求攔截和響應(yīng)攔截
3.token存儲(chǔ)
4.主題顏色更換
5.遞歸組件使用
6.路由守衛(wèi)
7.導(dǎo)出Excel表格
8.分頁
· ? 9.vue配置跨域問題
使用方法
直接打開這個(gè)網(wǎng)站會(huì)跳轉(zhuǎn)到我的github當(dāng)中，
源碼地址:https://github.com/MrZHLF/vue-admin
?
1.克隆源碼: git clone https://github.com/MrZHLF/vue-admin.git
克隆完之后，會(huì)出現(xiàn)一下目錄
- 先要在當(dāng)前進(jìn)行初始化一下 cnpm install
- 然后進(jìn)入client目錄進(jìn)行初始化一下 cnpm install?
- 然后在返回主目錄運(yùn)行(就是截圖的這個(gè)界面) cnpm run? dev
- 運(yùn)行之后，如果登錄報(bào)錯(cuò)500，需要安裝一個(gè)nodemon插件，因?yàn)榕渲昧藀ackage啟動(dòng)node服務(wù)命令，安裝完之后，再次運(yùn)行就不會(huì)出現(xiàn)問題
?
?以上都是所介紹的功能以及怎么使用，如果喜歡，在github幫忙star,你們的點(diǎn)贊，更能激發(fā)小編的動(dòng)力去繼續(xù)完善
?
轉(zhuǎn)載于:https://www.cnblogs.com/zhoulifeng/p/10123632.html
總結(jié)
以上是生活随笔為你收集整理的使用vue3.0和element实现后台管理模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
