使用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,你们的点赞,更能激发小编的动力去继续完善
使用vue3.0和element实现后台管理模板的更多相关文章
- Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)
Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...
- Vue.js+vue-element搭建属于自己的后台管理模板:更深入了解Vue.js(三)
前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...
- 基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜
简介 BlazAdmin 是一个基于Blazui的后台管理模板,无JS,无TS,非 Silverlight,非 WebForm,一个标签即可使用. 我将在下一篇文章讨论 Blazor 服务器端渲染与客 ...
- Vue + ElementUI 后台管理模板推荐
最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue- ...
- Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
- 推荐10个bootstrap及其他框架的后台管理模板
相对于网站前台炫目多彩的设计,网址后台的设计模板貌似有点少,在这里推荐10个可以免费下载的~ 1.自适应超酷整站 win8风格的Bootstrap响应式网站后台管理模板-Apricot 2.boots ...
- 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
随机推荐
- 深入浅出javascript(八)this、call和apply
_________此篇日志属于重要记录,长期更新__________ this,call,apply这三个是进阶JS的重要一步,需要详细的记录. ➢ this 一.作为对象的方法调用. 当函数作为对象 ...
- 开始编写Golang代码
介绍 本文主要讲述如何写一个简单的Go包和如何使用golang的工具,如何获取.编译和安装Go的包,以及如何使用go的命令. Go的工具需要将代码按照一定的方式来组织.所以请认真阅读本文. 代码的组织 ...
- Java理论学时第二节。课后作业。
枚举不属于原始数据类型,它的每个具体值都引用一个特定的对象,相同的值则引用同一个对象. 可以使用“==”和equals()方法直接比对枚举变量的值,换句话说,对于枚举类型的变量,“==”和equals ...
- noip第11课资料
- 三.int , bool , str
03.万恶之源-基本数据类型(int, bool, str) 本节主要内容: 1. python基本数据类型回顾 2. int----数字类型3. bool---布尔类型4. str--- 字符串类 ...
- SPFA_queue_链式前向星最短路 & HDU2433
题目大意:看完之后,觉得不肯能让我暴力,比较好想的就是初始化——每个点都求个最短路spfa,sum数组记录每个点到各个点的最短路之和,ans作为总和,之后一一删除边u-v,求关于u的最短路,如果dis ...
- phpStudy模式下安装ssl证书,详细版
phpStudy模式下安装ssl证书,详细版 2017年12月16日 14:27:38 骑着蚂蚁追大象 阅读数:4232 标签: phpstudy安装ssl证书 更多 个人分类: php 版权声明 ...
- linux常用命令(一)linux开关机、重启以及文本界面与图形界面互换
1.开关机 reboot 重启: shutdown [-efFhknr][-t 秒数][时间][警告信息] 关机: shutdown [-efFhknr][-t 秒数][时间][警告信息] 关机: - ...
- 数据导出之winfrom导出word(一)
我们常会用winfrom程序开发小工具,使用dataGridView控件展示数据.同时,我们也会有将这些数据导出的需求. 本篇文章介绍了开发过程中遇到的问题. 一.引用组件 首先,需要在窗体程序中引用 ...
- 静态工厂 + DbHelper
在 .NET 的学习过程中用过三种数据库:Sql Server.Access.SQLite.Sql Server 用得相对多一点点,但是,麻烦,每次用它都需要开服务,而且还费资源,更麻烦的是拷贝到一台 ...