Vue3 + Element-plus 搭建后台管理系统

村口晒太阳
1,371 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

Vue3 + Element-plus 搭建后台管理系统

完整项目地址：VUE-ADMIN-MS

系列文章：

1.VUE-ADMIN-MS 展示

总览.gif 这个项目的名称叫做VUE-ADMIN-MS，没啥含义，是一个Vue3 + Element-plus 搭建的后台管理系统。项目里边集成了一些功能性组件，是自己平时做项目时用的，也提供给大家，希望对大家有所帮助。

2.写 VUE-ADMIN-MS 的目的

最近公司开发了几款后台管理的项目，虽然界面设计风格出入很大，但前期的搭建工作却大同小异。于是就想偷个懒，希望能早点下班，然后就写了这个通用的模板，以后只需重点关注业务就行了。

3.VUE-ADMIN-MS 使用的环境和技术

  • node 14.17.0
  • npm 6.14.13
  • vue 3.2.13
  • vuex 4.1.0
  • vue-router 4.1.5
  • axios 1.1.3
  • element-plus 2.2.19

4.抢先体验（如对您有帮助，麻烦给个Star吧 ！！！）

下载地址：VUE-ADMIN-MS

项目启动：

// 安装依赖包
npm install
# OR
yarn

// 启动前端  
npm run serve 
# OR
yarn serve 

// 启动后端
npm run nodeServe 
# OR
yarn nodeServe

5.从零开始构建项目

项目写的也差不多了，接下来会做个详细总结。以下步骤都是已实现的功能，大家可放心食用。

第一步：项目搭建并运行

  • 使用@vue/cli创建项目
  • 项目目录解析
  • 使用element-plus的UI库
  • 使用vuex
  • 使用vue-router
  • 创建页面（首页）
  • 路由切换

第二步：实现功能点

  • 登录/注销
  • 登录权限
  • 按钮权限
  • 根据权限生成侧边栏
  • svg全局组件
  • 封装axios
  • 顶部进度条
  • 面包屑导航
  • 全屏
  • 侧边栏伸缩
  • 动态换肤
  • 标签导航栏

第三步：组件实现

  • echarts可视化
  • WebGis地图（Openlayers）
  • 富文本编辑器
  • MarkDown编辑器
  • 代码编辑器

6.参考

Vue CLI ：cli.vuejs.org/zh/guide/

Element Plus：element-plus.org/zh-CN/compo…

花裤衩 vue-element-admin：panjiachen.github.io/vue-element…

可视化图表ECharts：echarts.apache.org/zh/index.ht…

openlayers：openlayers.org/en/v5.3.0/a…

代码编辑器 vue3-ace-editor：www.npmjs.com/package/vue…

MarkDown编辑器 v-md-editor：code-farmer-i.github.io/vue-markdow…

富文本编辑器 TinyMCE：tinymce.ax-z.cn/

avatar
文章
阅读
粉丝