使用vue3.0和element實現後臺管理模板

經過本身所學的這段時間，利用空餘時間，使用vue3.0腳手架搭建的一個關於後臺的管理模板，所實現功能也是模仿一個後臺的界面，數據分爲兩種存放，一種是直接存儲到mlab,這裏的數據是存放這登陸註冊，只有註冊了本身的帳號才能訪問到頁面，另外一些數據直接存放在easy-mock裏，

源碼地址:https://github.com/MrZHLF/vue-admin

本身須要搭建vue3.0的腳手架，在這裏就不用講關於vue3.0的腳手架怎麼搭建。vue3.0腳手架須要node版本10以上，這樣的話，能夠使用nvm來管理本身的node版本，直接經過官網https://github.com/coreybutler/nvm-windows/releases。經過下載包進行安裝，而後環境配置就能夠使用了

• 比例安裝 nvm install  10.10.0 node10的版本和  nvm install  10.14.2兩個版本
• 當咱們切換的是能夠使用 nvm use 10.10.0，這樣就切換到10.10.0的版本了

 一寫登陸註冊的數據，是使用node+mongodb去完成編寫的，登陸註冊的數據存放到mlab裏面

效果展現

 

相關技術

　　1.使用vue3.0最新腳手架搭建環境

　　2.axios:數據請求

　　3.element-ui:基於vuejs2.0的ui組件庫。

　　4.vuex:是一個專爲 Vue.js 應用程序開發的狀態管理模式。

　　5.vue-router:通常單頁面應用spa都要用到的前端路由。

　　6.moment:時間日期格式

　　7.echarts：炫酷的圖表庫插件

　　8.vue-quill-editor：一款優秀的富文本編輯器

　　9.mavon-editor:一款Markdown編輯器

　　10.jwt-decode：用於解析token

實現功能

　　1..實現數據的增刪改查

　　2.請求攔截和響應攔截

　　3.token存儲

　　4.主題顏色更換

　　5.遞歸組件使用

　　6.路由守衛

　　7.導出Excel表格

　　8.分頁

·　  9.vue配置跨域問題

使用方法

直接打開這個網站會跳轉到個人github當中，

源碼地址:https://github.com/MrZHLF/vue-admin

 

1.克隆源碼: git clone https://github.com/MrZHLF/vue-admin.git

克隆完以後，會出現一下目錄

• 先要在當前進行初始化一下 cnpm install
• 而後進入client目錄進行初始化一下 cnpm install 
• 而後在返回主目錄運行(就是截圖的這個界面) cnpm run  dev
• 運行以後，若是登陸報錯500，須要安裝一個nodemon插件，由於配置了package啓動node服務命令，安裝完以後，再次運行就不會出現問題

 

 以上都是所介紹的功能以及怎麼使用，若是喜歡，在github幫忙star,大家的點贊，更能激發小編的動力去繼續完善