用Vue3+element-plus+express写个简单的后台管理框架

项目图片预览

最近刚看一遍Vue3基础视频,然后就迫不及待地试了一试,也没有写多复杂,就是一个登录页和一个菜单导航的内容页;

主要使用Vue3 + @vue/cli + element-plus + vue-router + vuex + axios + express技术,接口调的是自己mock的以及从后面服务接口返回的数据,由于Ts还没有学习这里就用Js,这无关紧要啊,哈哈;

项目gitHub地址:https://github.com/lcSuperman/vue3-program.git

下面是项目截图:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

项目代码

在这里插入图片描述

目前写的内容比较简单,只是一个框架而已,所以代码感觉也没有必要怎么介绍,相信用过Vue的一看就知道啦,这里就大致提一下文件夹目前存放的内容(按顺序):

  • api文件夹:放的是定义的api接口函数;
  • assets文件夹:基本css样式,和公共less样式,图片;
  • component文件夹:vue组件;
  • icon文件夹:下载到本地的阿里icon图标;
  • mock文件夹:注册mock,和存放mock的数据;
  • plugins文件夹:目前只放了element组件的按需引入组件;
  • router文件夹:注册路由;
  • utils文件夹:封装的axios和表单校验组件
  • views文件夹:vue路由组件

后面的就不说啦,再说就啰嗦啦!

总结

这个项目只是我看了一遍Vue3基础视频的练手,这里只是一个简单的分享,主要是记录一下,还有如果你们也要练Vue3项目,也可以拉下来直接使用,可以节约写这些基础代码的时间;

Vue3看起来多个组合式API,写起来感觉没有Vue2一目了然,其实则不然,反而更加方便和维护,日后也必会成为国内前端市场主流框架;

接下来肯定要继续去学习和深入探索Vue3相关的技术,并把遇到的问题和主要知识点总结一下继续写成博客,大家一起讨论和学习;

猜你喜欢

转载自blog.csdn.net/qq_44182284/article/details/122667220