通过自己所学的这段时间,利用空余时间,使用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实现后台管理模板的更多相关文章

  1. Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  2. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  3. Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四)

    Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...

  4. Vue.js+vue-element搭建属于自己的后台管理模板:更深入了解Vue.js(三)

    前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...

  5. 基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜

    简介 BlazAdmin 是一个基于Blazui的后台管理模板,无JS,无TS,非 Silverlight,非 WebForm,一个标签即可使用. 我将在下一篇文章讨论 Blazor 服务器端渲染与客 ...

  6. Vue + ElementUI 后台管理模板推荐

    最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue- ...

  7. Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板

    Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...

  8. 推荐10个bootstrap及其他框架的后台管理模板

    相对于网站前台炫目多彩的设计,网址后台的设计模板貌似有点少,在这里推荐10个可以免费下载的~ 1.自适应超酷整站 win8风格的Bootstrap响应式网站后台管理模板-Apricot 2.boots ...

  9. 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)

    后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...

随机推荐

  1. 使用Kotlin&Anko, 扔掉XML开发Android应用

    尝鲜使用Kotlin写了一段时间Android.说大幅度的减少了Java代码一点不夸张.用Java的时候动不动就new一个OnClickListener()匿名类,动不动就类型转换的地方都可以省下很多 ...

  2. day30(对象转json(java))

    转换之前需要知道什么是json json类似于map集合:键值对的方式存在,是一种轻量级数据交互格式. eg: {name:" ",age:15} [{name:" &q ...

  3. c需要注意的细节

    1.在纯的.c文件中,例如struct Stu,之后不可以只使用Stu作为关键字来表示这个定义的结构体类型,一定要使用struct Stu一起作为类似int这种关键字来定义或者获取size. 2.函数 ...

  4. 第86讲:Scala中For表达式的生成器、定义和过滤器

    今天我们来看一下For表达式中的生成器,定义和过滤等内容. 让我们来看下代码 def main(args:Array[String]){     val lauren = Persons(" ...

  5. 如何更好地使用Java 8的Optional

    Java 8中的Optional<T> 是一个可以包含或不可以包含非空值的容器对象,在 Stream API中很多地方也都使用到了Optional. java中非常讨厌的一点就是nullp ...

  6. SRM466

    250pt: 给出一个数n(n <= 10^10),问至少修改几位能使其变成完全平方数. 思路:     直接枚举平方根,然后统计.     注意枚举时要枚举到比她大.. #line 7 &qu ...

  7. Swift3 今日(TodayExtension)扩展图文笔记

    >图片1(创建今日扩展) >图片2  >图片3(设置大小)  >图片4(绘画控件) >图片5(设置共享文件)  >图片6(设置群组ID) >图片7(设置URL ...

  8. day04_雷神_函数

    #day04 1.函数 1.1函数传参 函数定义的时候是形参:函数执行的时候是实参 实参: 位置参数.关键字参数.混合参数 位置参数:位置一一对应 关键字参数: 可以位置不对应 混合参数:关键字参数要 ...

  9. Android-Kotlin-空值处理&字符串比较&常量

    空值处理: [案例一:] 1.Kotlin对控制处理很严格,默认就不能写null,否则编译都不通过: 描述Car汽车对象: package cn.kotlin.kotlin_base01 /** * ...

  10. Linux-压缩与归档

    压缩:gzip/gunzip.bzip2/bunzip2.xz/unxz 归档:tar ####归档+压缩:zip 1. gzip, gunzip, zcat - compress or expand ...