|
2 | 2 | <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg"> |
3 | 3 | </p> |
4 | 4 |
|
5 | | -# vue-element-admin |
| 5 | +# vue-element-admin |
6 | 6 |
|
7 | | -[](https://github.com/vuejs/vue) |
8 | | -[](https://github.com/ElemeFE/element) |
| 7 | +[](https://github.com/vuejs/vue) |
| 8 | +[](https://github.com/ElemeFE/element) |
9 | 9 | [](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) |
10 | 10 | []() |
11 | 11 |
|
| 12 | +A magical vue admin. |
12 | 13 |
|
13 | | -[线上地址](http://panjiachen.github.io/vue-element-admin) |
| 14 | +- [线上地址](http://panjiachen.github.io/vue-element-admin) |
14 | 15 |
|
15 | | -[English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md) |
| 16 | +- [文档地址](https://panjiachen.github.io/vue-element-admin-site/#/) |
16 | 17 |
|
17 | | -[wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) |
| 18 | +- [English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md) |
18 | 19 |
|
19 | | -[donate](https://github.com/PanJiaChen/vue-element-admin#donate) |
| 20 | +- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) |
| 21 | + |
| 22 | +- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate) |
20 | 23 |
|
21 | 24 | **本项目的定位是后台集成方案,不适合当基础模板来开发。** |
22 | 25 | - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template) |
23 | 26 | - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) |
24 | 27 |
|
25 | 28 |
|
26 | | - |
27 | | -**注意:该项目目前使用 [email protected]版本,所以最低兼容 Vue 2.3.0 ** |
| 29 | +**注意:该项目目前使用 [email protected]版本,所以最低兼容 Vue 2.5.0 ** |
28 | 30 |
|
29 | 31 | 楼主这里有一份调查[问卷](https://www.wjx.cn/m/16866569.aspx) 有空请填写一下,以表对本项目的支持~ps:不是给这个调查问卷网站做广告,所以填完问卷不用点上面抽奖有的没的那些东西 |
30 | 32 |
|
31 | | -## 前言 |
32 | | -> 这半年来一直在用vue写管理后台,目前后台已经有百来个页面,十几种权限,但维护成本依然很低,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios由webpack2打包。由于是个人项目,所以数据请求都是用了mockjs模拟。注意:在此项目基础上改造开发时请移除mock文件。 |
| 33 | +## 前序准备 |
33 | 34 |
|
| 35 | +你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 和 [element-ui](https://github.com/ElemeFE/element),提前了解和学习这些知识会对使用本项目有很大的帮助。 |
34 | 36 |
|
35 | | -写了一个系列的教程配套文章,如何从零构建后一个完整的后台项目: |
36 | | - |
37 | | - - [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) |
| 37 | +同时配套一个系列的教程文章,如何从零构建后一个完整的后台项目,建议大家先看完这些文章再来实践本项目 |
38 | 38 | - [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) |
39 | 39 | - [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) |
40 | 40 | - [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) |
|
47 | 47 |
|
48 | 48 | **如有问题请先看上述文章和Wiki,若不能满足,欢迎 issue 和 pr** |
49 | 49 |
|
50 | | - **该项目并不是一个脚手架,更倾向于是一个集成解决方案** |
| 50 | + **本项目并不是一个脚手架,更倾向于是一个集成解决方案** |
51 | 51 |
|
52 | 52 | **该项目不支持低版本游览器(如ie),有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)** |
53 | 53 |
|
54 | 54 |
|
55 | 55 | ## 功能 |
56 | 56 | - 登录/注销 |
57 | 57 | - 权限验证 |
58 | | -- 侧边栏 |
59 | | -- 面包屑 |
| 58 | +- 多环境发布 |
| 59 | +- 动态侧边栏(支持多级路由) |
| 60 | +- 动态面包屑 |
| 61 | +- 国际化多语言 |
| 62 | +- 多种动态换肤 |
| 63 | +- 快捷导航(标签页) |
60 | 64 | - 富文本编辑器 |
61 | 65 | - Markdown编辑器 |
62 | 66 | - JSON编辑器 |
| 67 | +- Screenfull全屏 |
63 | 68 | - 列表拖拽 |
64 | | -- plitPane |
65 | | -- Dropzone |
66 | | -- Sticky |
67 | | -- CountTo |
68 | | -- echarts图表 |
69 | | -- 401,404错误页面 |
| 69 | +- Svg Sprite 图标 |
| 70 | +- Dashboard |
| 71 | +- 本地mock数据 |
| 72 | +- Echarts 图表 |
| 73 | +- Clipboard(剪贴复制) |
| 74 | +- 401/404错误页面 |
70 | 75 | - 错误日志 |
71 | 76 | - 导出excel |
72 | | -- zip |
| 77 | +- 导出zip |
73 | 78 | - 前端可视化excel |
74 | | -- table example |
| 79 | +- Table example |
75 | 80 | - 动态table example |
76 | 81 | - 拖拽table example |
77 | 82 | - 内联编辑table example |
78 | | -- form example |
79 | | -- 多环境发布 |
80 | | -- dashboard |
81 | | -- 二次登录 |
82 | | -- 动态侧边栏(支持多级路由) |
83 | | -- mock数据 |
84 | | -- cache tabs example |
85 | | -- screenfull |
86 | | -- markdown2html |
87 | | -- views-tab |
88 | | -- clipboard |
| 83 | +- Form example |
| 84 | +- 二步登录 |
| 85 | +- SplitPane |
| 86 | +- Dropzone |
| 87 | +- Sticky |
| 88 | +- CountTo |
| 89 | +- Markdown2html |
89 | 90 |
|
90 | 91 |
|
91 | 92 | ## 开发 |
|
121 | 122 | │ ├── assets // 主题 字体等静态资源 |
122 | 123 | │ ├── components // 全局公用组件 |
123 | 124 | │ ├── directive // 全局指令 |
124 | | -│ ├── filtres // 全局filter |
125 | | -│ ├── mock // mock数据 |
| 125 | +│ ├── filtres // 全局 filter |
| 126 | +│ ├── icons // 项目所有 svg icons |
| 127 | +│ ├── lang // 国际化 language |
| 128 | +│ ├── mock // 项目mock 模拟数据 |
126 | 129 | │ ├── router // 路由 |
127 | | -│ ├── store // 全局store管理 |
| 130 | +│ ├── store // 全局 store管理 |
128 | 131 | │ ├── styles // 全局样式 |
129 | 132 | │ ├── utils // 全局公用方法 |
130 | | -│ ├── view // view |
| 133 | +│ ├── vendor // 公用vendor |
| 134 | +│ ├── views // view |
131 | 135 | │ ├── App.vue // 入口页面 |
132 | | -│ └── main.js // 入口 加载组件 初始化等 |
| 136 | +│ ├── main.js // 入口 加载组件 初始化等 |
| 137 | +│ └── permission.js // 权限管理 |
133 | 138 | ├── static // 第三方不打包资源 |
134 | 139 | │ └── Tinymce // 富文本 |
135 | 140 | ├── .babelrc // babel-loader 配置 |
|
144 | 149 | ## Changelog |
145 | 150 | Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). |
146 | 151 |
|
147 | | -## Donate |
148 | | -If you find this project useful, you can buy me a cup of coffee |
149 | | - |
150 | | - |
151 | 152 | ## 状态管理 |
152 | 153 | 后台只有user和app配置相关状态使用vuex存在全局,其它数据都由每个业务页面自己管理。 |
153 | 154 |
|
154 | | - |
155 | | -## 效果图 |
156 | | - |
157 | | -#### 两步验证登录 支持微信和qq |
158 | | - |
159 | | - |
160 | | - |
161 | | -#### 真正的动态换肤 |
162 | | - |
163 | | -<br /> |
164 | | - |
165 | | -#### tabs |
166 | | - |
167 | | -<br /> |
168 | | - |
169 | | - |
170 | | - |
171 | | -#### 可收起侧边栏 |
172 | | - |
173 | | - |
174 | | - |
175 | | -#### table拖拽排序 |
176 | | - |
177 | | - |
178 | | - |
179 | | - |
180 | | -#### 动态table |
181 | | - |
182 | | - |
183 | | - |
184 | | - |
185 | | -#### 上传裁剪头像 |
186 | | - |
187 | | - |
188 | | - |
189 | | - |
190 | | -#### 错误统计 |
191 | | - |
192 | | - |
193 | | - |
194 | | - |
195 | | -#### 富文本(整合七牛 打水印等个性化功能) |
196 | | - |
197 | | - |
198 | | - |
199 | | -#### 封装table组件 |
200 | | - |
201 | | - |
202 | | - |
203 | | -#### 图表 |
204 | | - |
205 | | - |
206 | | - |
207 | | - |
208 | | -#### 导出excel |
209 | | - |
210 | | - |
211 | | - |
212 | | - |
213 | 155 | ## [查看更多demo](http://panjiachen.github.io/vue-element-admin) |
| 156 | + |
| 157 | + |
| 158 | +## Donate |
| 159 | +If you find this project useful, you can buy me a cup of coffee |
| 160 | + |
214 | 161 |
|
215 | 162 | ## License |
216 | 163 |
|
|
0 commit comments