使用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,大家的点赞，更能激发小编的动力去继续完善