# vue-admin-ms

**Repository Path**: mdwb927/vue-admin-ms

## Basic Information

- **Project Name**: vue-admin-ms
- **Description**: vue3.0+element开发后台管理系统
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-06-26
- **Last Updated**: 2023-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

完整项目地址：[VUE-ADMIN-MS](https://gitee.com/zhaodapeng/vue-admin-ms)

系列文章：

- [Vue3 + Element-plus 搭建后台管理系统](https://juejin.cn/post/7169788943146156045)
- [一、Vue3 + Element-plus 搭建后台管理系统之项目搭建并运行](https://juejin.cn/post/7170117521121493023)
- [二、Vue3 + Element-plus 搭建后台管理系统之功能点实现](https://juejin.cn/post/7170519724747390983)
- [三、Vue3 + Element-plus 搭建后台管理系统之组件实现](https://juejin.cn/post/7170870941709238286)

### 1.VUE-ADMIN-MS 展示
![总览.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54364007775d4b02beb2379d50626078~tplv-k3u1fbpfcp-watermark.image?)
这个项目的名称叫做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](https://gitee.com/zhaodapeng/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 ：[https://cli.vuejs.org/zh/guide/](https://cli.vuejs.org/zh/guide/)

Element Plus：[https://element-plus.org/zh-CN/component/button.html](https://element-plus.org/zh-CN/component/button.html)

花裤衩 vue-element-admin：[https://panjiachen.github.io/vue-element-admin-site/zh/](https://panjiachen.github.io/vue-element-admin-site/zh/)

可视化图表ECharts：[https://echarts.apache.org/zh/index.html](https://echarts.apache.org/zh/index.html)

openlayers：[https://openlayers.org/en/v5.3.0/apidoc/](https://openlayers.org/en/v5.3.0/apidoc/)

代码编辑器 vue3-ace-editor：[https://www.npmjs.com/package/vue3-ace-editor ](https://www.npmjs.com/package/vue3-ace-editor)

MarkDown编辑器 v-md-editor：[https://code-farmer-i.github.io/vue-markdown-editor/zh/ ](https://code-farmer-i.github.io/vue-markdown-editor/zh/)

富文本编辑器 TinyMCE：[http://tinymce.ax-z.cn/](http://tinymce.ax-z.cn/)