|
1 |
| -# vue-element-admin #1 |
2 |
| -. |
3 |
| -[](https://github.com/vuejs/vue) |
4 |
| -[](https://github.com/ElemeFE/element) |
5 |
| -[](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) |
6 |
| -[]() |
| 1 | +# vueAdmin-template |
7 | 2 |
|
| 3 | +> A minimal vue admin template with Element UI & axios & iconfont & permission control & lint |
8 | 4 |
|
9 |
| -[线上地址](http://panjiachen.github.io/vue-element-admin) |
| 5 | +**Live demo:** http://panjiachen.github.io/vueAdmin-template |
10 | 6 |
|
11 |
| -[English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md) |
| 7 | +[中文文档](https://github.com/PanJiaChen/vueAdmin-template/blob/master/README-zh.md) |
12 | 8 |
|
13 |
| -[wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) |
| 9 | +## Build Setup |
14 | 10 |
|
15 |
| -[donate](https://github.com/PanJiaChen/vue-element-admin#donate) |
| 11 | +``` bash |
16 | 12 |
|
17 |
| -**本项目的定位是后台集成方案,不适合当基础模板来开发。** |
18 |
| - - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template) |
19 |
| - - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) |
| 13 | +# Clone project |
| 14 | +git clone https://github.com/PanJiaChen/vueAdmin-template.git |
20 | 15 |
|
| 16 | +# Install dependencies |
| 17 | +npm install |
21 | 18 |
|
| 19 | +# serve with hot reload at localhost:9528 |
| 20 | +npm run dev |
22 | 21 |
|
23 |
| -**注意:该项目目前使用element-ui@1.4.2版本,所以最低兼容 Vue 2.3.0** |
| 22 | +# build for production with minification |
| 23 | +npm run build |
24 | 24 |
|
25 |
| -## 前言 |
26 |
| -> 这半年来一直在用vue写管理后台,目前后台已经有百来个页面,十几种权限,但维护成本依然很低,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios由webpack2打包。由于是个人项目,所以数据请求都是用了mockjs模拟。注意:在此项目基础上改造开发时请移除mock文件。 |
27 |
| -
|
28 |
| - |
29 |
| -写了一个系列的教程配套文章,如何从零构建后一个完整的后台项目: |
30 |
| - |
31 |
| - - [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) |
32 |
| - - [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) |
33 |
| - - [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) |
34 |
| - - [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) |
35 |
| - - [手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) |
36 |
| - - [手摸手,带你封装一个vue component](https://segmentfault.com/a/1190000009090836) |
37 |
| - |
38 |
| - 相应需求,开了一个qq群 `591724180` 方便大家交流 |
39 |
| - |
40 |
| - 或者可以加入该 **[圈子](https://jianshiapp.com/circles/1209)** 讨论问题 |
41 |
| - |
42 |
| - **如有问题请先看上述文章和Wiki,若不能满足,欢迎 issue 和 pr** |
43 |
| - |
44 |
| - **该项目并不是一个脚手架,更倾向于是一个集成解决方案** |
45 |
| - |
46 |
| - **该项目不支持低版本游览器(如ie),有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)** |
47 |
| - |
48 |
| - |
49 |
| -## 功能 |
50 |
| -- 登录/注销 |
51 |
| -- 权限验证 |
52 |
| -- 侧边栏 |
53 |
| -- 面包屑 |
54 |
| -- 富文本编辑器 |
55 |
| -- Markdown编辑器 |
56 |
| -- JSON编辑器 |
57 |
| -- 列表拖拽 |
58 |
| -- plitPane |
59 |
| -- Dropzone |
60 |
| -- Sticky |
61 |
| -- CountTo |
62 |
| -- echarts图表 |
63 |
| -- 401,404错误页面 |
64 |
| -- 错误日志 |
65 |
| -- 导出excel |
66 |
| -- zip |
67 |
| -- 前端可视化excel |
68 |
| -- table example |
69 |
| -- 动态table example |
70 |
| -- 拖拽table example |
71 |
| -- 内联编辑table example |
72 |
| -- form example |
73 |
| -- 多环境发布 |
74 |
| -- dashboard |
75 |
| -- 二次登录 |
76 |
| -- 动态侧边栏(支持多级路由) |
77 |
| -- mock数据 |
78 |
| -- cache tabs example |
79 |
| -- screenfull |
80 |
| -- markdown2html |
81 |
| -- views-tab |
82 |
| -- clipboard |
83 |
| - |
84 |
| - |
85 |
| -## 开发 |
86 |
| -```bash |
87 |
| - # 克隆项目 |
88 |
| - git clone https://github.com/PanJiaChen/vue-element-admin.git |
89 |
| - |
90 |
| - # 安装依赖 |
91 |
| - npm install |
92 |
| - //or # 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 |
93 |
| - npm install --registry=https://registry.npm.taobao.org |
94 |
| - |
95 |
| - # 本地开发 开启服务 |
96 |
| - npm run dev |
| 25 | +# build for production and view the bundle analyzer report |
| 26 | +npm run build --report |
97 | 27 | ```
|
98 |
| -浏览器访问 http://localhost:9527 |
99 |
| - |
100 |
| -## 发布 |
101 |
| -```bash |
102 |
| - # 发布测试环境 带webpack ananalyzer |
103 |
| - npm run build:sit-preview |
104 |
| - |
105 |
| - # 构建生成环境 |
106 |
| - npm run build:prod |
107 |
| -``` |
108 |
| - |
109 |
| -## 目录结构 |
110 |
| -```shell |
111 |
| -├── build // 构建相关 |
112 |
| -├── config // 配置相关 |
113 |
| -├── src // 源代码 |
114 |
| -│ ├── api // 所有请求 |
115 |
| -│ ├── assets // 主题 字体等静态资源 |
116 |
| -│ ├── components // 全局公用组件 |
117 |
| -│ ├── directive // 全局指令 |
118 |
| -│ ├── filtres // 全局filter |
119 |
| -│ ├── mock // mock数据 |
120 |
| -│ ├── router // 路由 |
121 |
| -│ ├── store // 全局store管理 |
122 |
| -│ ├── styles // 全局样式 |
123 |
| -│ ├── utils // 全局公用方法 |
124 |
| -│ ├── view // view |
125 |
| -│ ├── App.vue // 入口页面 |
126 |
| -│ └── main.js // 入口 加载组件 初始化等 |
127 |
| -├── static // 第三方不打包资源 |
128 |
| -│ └── Tinymce // 富文本 |
129 |
| -├── .babelrc // babel-loader 配置 |
130 |
| -├── eslintrc.js // eslint 配置项 |
131 |
| -├── .gitignore // git 忽略项 |
132 |
| -├── favicon.ico // favicon图标 |
133 |
| -├── index.html // html模板 |
134 |
| -└── package.json // package.json |
135 |
| - |
136 |
| -``` |
137 |
| - |
138 |
| -## Changelog |
139 |
| -Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). |
140 |
| - |
141 |
| -## Donate |
142 |
| -If you find this project useful, you can buy me a cup of coffee |
143 |
| - |
144 |
| - |
145 |
| -## 状态管理 |
146 |
| -后台只有user和app配置相关状态使用vuex存在全局,其它数据都由每个业务页面自己管理。 |
147 |
| - |
148 |
| - |
149 |
| -## 效果图 |
150 |
| - |
151 |
| -#### 两步验证登录 支持微信和qq |
152 |
| - |
153 |
| - |
154 |
| - |
155 |
| -#### 真正的动态换肤 |
156 | 28 |
|
157 |
| -<br /> |
| 29 | +## Demo |
| 30 | + |
158 | 31 |
|
159 |
| -#### tabs |
| 32 | +## Related Project |
| 33 | + [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) |
160 | 34 |
|
161 |
| -<br /> |
| 35 | + [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) |
162 | 36 |
|
163 | 37 |
|
164 |
| - |
165 |
| -#### 可收起侧边栏 |
166 |
| - |
167 |
| - |
168 |
| - |
169 |
| -#### table拖拽排序 |
170 |
| - |
171 |
| - |
172 |
| - |
173 |
| - |
174 |
| -#### 动态table |
175 |
| - |
176 |
| - |
177 |
| - |
178 |
| - |
179 |
| -#### 上传裁剪头像 |
180 |
| - |
181 |
| - |
182 |
| - |
183 |
| - |
184 |
| -#### 错误统计 |
185 |
| - |
186 |
| - |
187 |
| - |
188 |
| - |
189 |
| -#### 富文本(整合七牛 打水印等个性化功能) |
190 |
| - |
191 |
| - |
192 |
| - |
193 |
| -#### 封装table组件 |
194 |
| - |
195 |
| - |
196 |
| - |
197 |
| -#### 图表 |
198 |
| - |
199 |
| - |
200 |
| - |
201 |
| - |
202 |
| -#### 导出excel |
203 |
| - |
204 |
| - |
205 |
| - |
206 |
| - |
207 |
| -## [查看更多demo](http://panjiachen.github.io/vue-element-admin) |
208 |
| - |
209 | 38 | ## License
|
210 |
| - |
211 |
| -MIT |
| 39 | +[MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license. |
0 commit comments