通過自己所學的這段時間,利用空餘時間,使用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,你們的點贊,更能激發小編的動力去繼續完善