Skip to content

Latest commit

 

History

History
120 lines (68 loc) · 4.14 KB

README.md

File metadata and controls

120 lines (68 loc) · 4.14 KB

基于Vue3最新标准,实现后台前端综合解决方案

项目简介

前言:前一阵子的学习主要集中在React,由易到难做了四个项目,对前端开发也有了更深入的了解。前端领域的三个框架React、Vue、Angular,目前我只对React还算了解。最近学习了Vue3,再接触了React之后再来看Vue,两者有许多相似之处。Vue很多地方也借鉴了React和Angular,Vue3中用script setup来写JS代码和React很像,所以我选择用Vue3做一个后台管理系统,也作为学习Vue的一个实践。结合前几个项目的类型,这次的项目类型我选择了后台管理系统,那么五个项目就涉及了普通Web页面开发、移动端单页面app开发、组件库开发、node.js开发、后台管理系统开发,基本上把热门的前端开发类型过了一遍,后面还可以学习Electron桌面端开发、微信小程序开发、混合多端开发。

简介:本项目是基于VUE3,参考vue-element-admin开发的后台前端综合解决方案。

技术栈

前端部分:Vue3、element-plus、vueRouter4 、vuex4

后端部分:expess(采用慕课网提供的后端接口)

项目结构

admin架构图

项目地址

https://comfy-alfajores-920362.netlify.app

功能实现

1.登录页面

图片

2.主页面

图片 图片

3.后台通用方案

菜单栏:导航、页面检索、全屏、换肤、国际化、菜单

图片

国际化

图片

动态主题

图片

全屏处理

图片

页面检索

图片

TagsViews

图片

功能引导

图片

4.数据注入、导出

图片 图片 图片

5.权限分控

图片

6.表格处理

图片

7.文章编辑器

markdown

图片

富文本

图片

8. 待实现功能:

  1. 图表
  2. 数据可视化
  3. 待定......

项目运行

1.将项目clone下来

$ git clone https://github.com/luozhiqiang-code/vue-admin.git
$ cd admin
$ npm install

2.运行

首先到admin/.env.development修改后端接口地址

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = 'https://imooc-admin.lgdsunday.club/prod-api'

然后到admin/src/utils/request.js修改icode验证码

 config.headers.icode = 'B9292E99276D75B4'