README.md 5.55 KB
Newer Older
Pan's avatar
Pan committed
1
# vue-element-admin #
Pan's avatar
refine    
Pan committed
2
3
[线上地址](http://panjiachen.github.io/vue-element-admin)

Pan's avatar
Pan committed
4
5
[English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md)

Pan's avatar
refine    
Pan committed
6
7
[wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)

Pan's avatar
Pan committed
8
9
**注意:该项目目前使用element-ui@1.3.3版本,所以最低兼容 Vue 2.3.0**

Pan's avatar
refine    
Pan committed
10
## 前言
Pan's avatar
Pan committed
11
> 这半年来一直在用vue写管理后台,目前后台已经有七十多个页面,十几种权限,但维护成本依然很低,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目,所以数据请求都是用了mockjs模拟。注意:在次项目基础上改造开发时请移除mock文件。
Pan's avatar
Pan committed
12

Pan's avatar
Pan committed
13
后续会出一系列的教程配套文章,如如何从零构建后台项目框架,如何做完整的用户系统(如权限验证,二次登录等),如何二次开发组件(如富文本),如何整合七牛等等文章,各种后台开发经验等等。莫急~~
Pan's avatar
Pan committed
14

Pan's avatar
Pan committed
15
相应需求,开了一个qq群 591724180 方便大家交流
Pan's avatar
Pan committed
16

Pan's avatar
refine    
Pan committed
17
 - [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
Pan's avatar
Pan committed
18
19
 - [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
 - [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
Pan's avatar
Pan committed
20
 - [ 手摸手,带你封装一个vue component](https://segmentfault.com/a/1190000009090836)
Pan's avatar
refine    
Pan committed
21
22


Pan's avatar
Pan committed
23
 **如有问题请先看上述问题和Wiki,不能满足,欢迎issue和pr~**
Pan's avatar
refine    
Pan committed
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

## 功能
- 登录/注销
- 权限验证
- 侧边栏
- 面包屑
- 富文本编辑器
- Markdown编辑器
- JSON编辑器
- 列表拖拽
- plitPane
- Dropzone
- Sticky
- CountTo
- echarts图表
- 401,401错误页面
- 错误日志
- 导出excel
- table example
Pan's avatar
Pan committed
43
44
- 动态table example
- 拖拽table example
Pan's avatar
refine    
Pan committed
45
46
47
48
- form example
- 多环境发布
- dashboard
- 二次登录
Pan's avatar
Pan committed
49
- 动态侧边栏(支持多级路由)
Pan's avatar
refine    
Pan committed
50
51
52
53
- mock数据


## 开发
Pan's avatar
refine    
Pan committed
54
```bash
Pan's avatar
Pan committed
55
    # 克隆项目
Pan's avatar
refine    
Pan committed
56
57
    git clone https://github.com/PanJiaChen/vue-element-admin.git

Pan's avatar
Pan committed
58
59
    # 安装依赖
    npm install
Pan's avatar
Pan committed
60
    //or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
Pan's avatar
Pan committed
61
    npm install --registry=https://registry.npm.taobao.org
Pan's avatar
refine    
Pan committed
62
63

    # 本地开发 开启服务
Pan's avatar
Pan committed
64
    npm run dev
Pan's avatar
refine    
Pan committed
65
```
Pan's avatar
refine    
Pan committed
66
67
68
浏览器访问 http://localhost:9527

## 发布
Pan's avatar
Pan committed
69
```bash
Pan's avatar
Pan committed
70
71
    # 发布测试环境 带webpack ananalyzer
    npm run build:sit-preview
Pan's avatar
refine    
Pan committed
72

Pan's avatar
Pan committed
73
74
    # 构建生成环境
    npm run build:prod
Pan's avatar
Pan committed
75
76
```

Pan's avatar
refine    
Pan committed
77
78
79
80
81
## 目录结构
```shell
├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
Pan's avatar
refine    
Pan committed
82
│   ├── api                    // 所有请求
Pan's avatar
refine    
Pan committed
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局filter
│   ├── mock                   // mock数据
│   ├── router                 // 路由
│   ├── store                  // 全局store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── view                   // view
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
│   ├── jquery
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

```

## 状态管理
后台只有user和app配置相关状态使用vuex存在全局,其它数据都由每个业务页面自己管理。


Pan's avatar
Pan committed
111
## 效果图
Pan's avatar
update    
Pan committed
112

Pan's avatar
update    
Pan committed
113
#### 两步验证登录 支持微信和qq
Pan's avatar
update    
Pan committed
114

Pan's avatar
Pan committed
115
116
![两步验证 here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif)

Pan's avatar
update    
Pan committed
117
#### 真正的动态换肤
Pan's avatar
update    
Pan committed
118

Pan's avatar
Pan committed
119
120
121
![真正的动态换肤](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)<br />


Pan's avatar
Pan committed
122

Pan's avatar
update    
Pan committed
123
#### 可收起侧边栏
Pan's avatar
update    
Pan committed
124

Pan's avatar
Pan committed
125
126
![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)

Pan's avatar
Pan committed
127
#### table拖拽排序
Pan's avatar
update    
Pan committed
128

Pan's avatar
Pan committed
129
130
![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)

Pan's avatar
Pan committed
131

Pan's avatar
Pan committed
132
133
134
135
#### 动态table

![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/dynamictable.gif)

Pan's avatar
Pan committed
136

Pan's avatar
update    
Pan committed
137
#### 上传裁剪头像
Pan's avatar
update    
Pan committed
138

Pan's avatar
Pan committed
139
140
![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)

Pan's avatar
Pan committed
141

Pan's avatar
Pan committed
142
143
#### 错误统计

Pan's avatar
Pan committed
144
![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)
Pan's avatar
Pan committed
145

Pan's avatar
Pan committed
146

Pan's avatar
update    
Pan committed
147
#### 富文本(整合七牛 打水印等个性化功能)
Pan's avatar
update    
Pan committed
148

Pan's avatar
Pan committed
149
150
![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)

Pan's avatar
update    
Pan committed
151
#### 封装table组件
Pan's avatar
update    
Pan committed
152

Pan's avatar
Pan committed
153
154
155
![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif)

#### 图表
Pan's avatar
update    
Pan committed
156

Pan's avatar
Pan committed
157
158
![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif)

Pan's avatar
Pan committed
159

Pan's avatar
update    
Pan committed
160
#### 导出excel
Pan's avatar
update    
Pan committed
161

Pan's avatar
Pan committed
162
163
![enter image description here](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png)

Pan's avatar
Pan committed
164
165
166

## [更多demo](http://panjiachen.github.io/vue-element-admin)