专栏首页前端技术开发使用vue3.0和element实现后台管理模板

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用node和express+mongodb实现数据增删改功能

    2018即将过去,2019即将来临,前端技术不断在在更新,学的东西越来越多。我们只有不断的学习,才不能被淘汰。在前后端分离的一个时代,后端提供接口,前端调用接口...

    小周sri的码农
  • 小程序实现图片上传,预览以及图片base64位处理

    最近一段时间在做小程序项目,第一期功也完工了。需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑。今天写一个小程序实现图片上传,预览,以...

    小周sri的码农
  • Vue2.0搭建脚手架流程

    Vue.js是一套构建用户界面的渐进式框架。 Vue 只关注视图层,采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和...

    小周sri的码农
  • 开放数据质量(CS)

    本研究讨论了如何描述(开放)数据质量、制定数据质量管理方案时应考虑的因素以及如何将其应用于开放数据以检查其质量。本文的研究方法侧重于制定一套可获得数据质量评估结...

    Pamela_Lin
  • 前沿 | 机器学习助力医疗,通过数据分析发现近6000种新病毒

    选自Nature 作者:Amy Maxmen 机器之心编译 参与:黄小天、刘晓坤 最近,研究者借助 AI 技术发现了近 6000 种前所未闻的新病毒,这一工作已...

    机器之心
  • Java 集合系列(二)—— ArrayList

      ArrayList 是通过一个数组来实现的,因此它是在连续的存储位置存放对象的引用,只不过它比 Array 更智能,能够根据集合长度进行自动扩容。

    那一叶随风
  • Android开发之自定义组件和接口回调

    说到自定义控件不得不提的就是接口回调,在Android开发中接口回调用的还是蛮多的。在这篇博客开始的时候呢,我想聊一下iOS的自定义控件。在iOS中自定义控件的...

    lizelu
  • (2019)[前端]面试题[8]:CSS动画中的transition和animation

    有一个很有意思的现象:如果把transition: width 1s 0.5s ease-in-out;写在:hover上会怎样?

    无道
  • SAP JAM里的用户profile功能

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • Maven多模块构建实例

    注意:需要在src/main/webapp下创建WEB-INF文件夹,以及在WEB-INF下创建web.xml。

    布禾

扫码关注云+社区

领取腾讯云代金券