# vue3-manager-system

**Repository Path**: e4glet/vue3-manager-system

## Basic Information

- **Project Name**: vue3-manager-system
- **Description**: 使用Vue3.x构建的后台管理模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-25
- **Last Updated**: 2025-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于Vue3的后台管理系统框架模板(仿华为项目管理界面)

## 项目介绍
本模板是仿照华为云后台管理界面设计的一套后台管理平台框架，后期会衍生多个模板。

该模板框架使用Webpack和Js构建，未使用ts语言。

![输入图片说明](preview001.png)

![输入图片说明](preview002.png)

![输入图片说明](preview003.png)

![输入图片说明](preview004.png)

## 系统模板应用的组件及版本
1. Vue 3.x
2. node v18.19.0
3. axios
4. ElementUI-Plus
5. sass
6. vue-wechat-title
7. wangeditor
8. echarts

## 环境构建命令
```
npm install axios
npm install element-plus --save
npm install @element-plus/icons-vue
npm install --save-dev sass sass-loader
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save
npm install echarts --save
```

## 配置
```
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import VueWechatTitle from 'vue-wechat-title'; //统一标题
import * as ElementPlusIconsVue from '@element-plus/icons-vue'; //引入elementPlus图标


const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(store).use(router).use(ElementPlus).use(VueWechatTitle).mount('#app')
```

## 项目变化
使用`sass`替代`node-sass`

## 新增功能
1. 自定义项目规划思维导图
2. 模块化项目管理

## 初始化项目
```
npm install
```

### 编译和运行项目
```
npm run serve
```

### 编译打包为生产文件
```
npm run build
```


### 作者
e4glet