README.md 7.51 KB
Newer Older
花裤衩's avatar
花裤衩 committed
1
<p align="center">
花裤衩's avatar
花裤衩 committed
2
  <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
花裤衩's avatar
花裤衩 committed
3
4
</p>

花裤衩's avatar
花裤衩 committed
5
<p align="center">
6
  <a href="https://github.com/vuejs/vue">
Pan's avatar
docs    
Pan committed
7
    <img src="https://img.shields.io/badge/vue-2.5.17-brightgreen.svg" alt="vue">
8
9
  </a>
  <a href="https://github.com/ElemeFE/element">
Pan's avatar
Pan committed
10
    <img src="https://img.shields.io/badge/element--ui-2.4.11-brightgreen.svg" alt="element-ui">
11
12
13
14
15
16
17
18
19
20
  </a>
  <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
    <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
  </a>
  <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
  </a>
  <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
    <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
  </a>
Pan's avatar
docs    
Pan committed
21
22
23
24
25
26
  <a href="https://gitter.im/vue-element-admin/discuss">
    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
  </a>
  <a href="https://panjiachen.github.io/vue-element-admin-site/donate">
    <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
  </a>
花裤衩's avatar
花裤衩 committed
27
</p>
花裤衩's avatar
花裤衩 committed
28

花裤衩's avatar
花裤衩 committed
29
English | [简体中文](./README.zh-CN.md)
花裤衩's avatar
花裤衩 committed
30

花裤衩's avatar
花裤衩 committed
31
## Introduction
花裤衩's avatar
花裤衩 committed
32

Pan's avatar
Pan committed
33
[vue-element-admin](http://panjiachen.github.io/vue-element-admin) is a front-end management background integration solution. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element](https://github.com/ElemeFE/element).
Pan's avatar
Pan committed
34

Pan's avatar
Pan committed
35
It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
Pan's avatar
refine    
Pan committed
36

花裤衩's avatar
花裤衩 committed
37
- [Preview](http://panjiachen.github.io/vue-element-admin)
Pan's avatar
Pan committed
38

Pan's avatar
Pan committed
39
- [Documentation](https://panjiachen.github.io/vue-element-admin-site/)
Pan's avatar
refine    
Pan committed
40

Pan's avatar
Pan committed
41
42
- [Gitter](https://gitter.im/vue-element-admin/discuss)

Pan's avatar
Pan committed
43
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
Pan's avatar
Pan committed
44

Pan's avatar
Pan committed
45
- [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/)
花裤衩's avatar
花裤衩 committed
46

Pan's avatar
Pan committed
47
48
- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览

Pan's avatar
Pan committed
49
**This project is positioned as a background integration solution and is not suitable for secondary development as a basic template.**
ttop5's avatar
ttop5 committed
50

51
- Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
Pan's avatar
Pan committed
52
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
53
- Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
Pan's avatar
Pan committed
54
55
56
57
58
59

**This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**

**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**

**Start using `webpack4` from `v3.8.0`. If you still want to continue using `webpack3`, please use this branch [webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)**
Pan's avatar
Pan committed
60

花裤衩's avatar
花裤衩 committed
61
## Preparation
Pan's avatar
Pan committed
62

Pan's avatar
Pan committed
63
You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [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/), [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
Pan's avatar
Pan committed
64
Understanding and learning this knowledge in advance will greatly help the use of this project.
Pan's avatar
Pan committed
65

Pan's avatar
Pan committed
66
---
Pan's avatar
Pan committed
67

68
69
70
 <p align="center">
  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
</p>
Pan's avatar
refine    
Pan committed
71

Pan's avatar
Pan committed
72
73
74
75
76
## Sponsors
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)

<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>

花裤衩's avatar
花裤衩 committed
77
## Features
Pan's avatar
Pan committed
78

花裤衩's avatar
花裤衩 committed
79
80
```
- Login / Logout
Pan's avatar
Pan committed
81
82
83
84
85
86

- Permission Authentication
  - Page permission
  - Directive permission
  - Two-step login

花裤衩's avatar
花裤衩 committed
87
- Multi-environment build
Pan's avatar
Pan committed
88
89
90
91
92
93
94
  - dev sit stage prod

- Global Features
  - I18n
  - Multiple dynamic themes
  - Dynamic sidebar (supports multi-level routing)
  - Dynamic breadcrumb
Nikita Sobolev's avatar
Nikita Sobolev committed
95
  - Tags-view (Tab page Support right-click operation)
Pan's avatar
Pan committed
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
  - Svg Sprite
  - Mock data
  - Screenfull
  - Responsive Sidebar

- Editor
  - Rich Text Editor
  - Markdown Editor
  - JSON Editor

- Excel
  - Export Excel
  - Export zip
  - Upload Excel
  - Visualization Excel

- Table
  - Dynamic Table
  - Drag And Drop Table
  - Tree Table
  - Inline Edit Table

- Error Page
  - 401
  - 404

- Components
  - Avatar Upload
  - Back To Top
  - Drag Dialog
126
  - Drag Select
Pan's avatar
Pan committed
127
128
129
130
131
132
133
134
135
  - Drag Kanban
  - Drag List
  - SplitPane
  - Dropzone
  - Sticky
  - CountTo

- Advanced Example
- Error Log
Pan's avatar
Pan committed
136
- Dashboard
花裤衩's avatar
花裤衩 committed
137
- Guide Page
Pan's avatar
Pan committed
138
- ECharts
花裤衩's avatar
花裤衩 committed
139
- Clipboard
140
- Markdown to html
花裤衩's avatar
花裤衩 committed
141
142
143
```

## Getting started
Pan's avatar
refine    
Pan committed
144

Pan's avatar
refine    
Pan committed
145
```bash
Pan's avatar
Pan committed
146
# clone the project
花裤衩's avatar
花裤衩 committed
147
git clone https://github.com/PanJiaChen/vue-element-admin.git
Pan's avatar
refine    
Pan committed
148

花裤衩's avatar
花裤衩 committed
149
150
# install dependency
npm install
Pan's avatar
refine    
Pan committed
151

花裤衩's avatar
花裤衩 committed
152
153
# develop
npm run dev
Pan's avatar
refine    
Pan committed
154
```
Pan's avatar
refine    
Pan committed
155

花裤衩's avatar
花裤衩 committed
156
157
158
This will automatically open http://localhost:9527.

## Build
Pan's avatar
Pan committed
159

Pan's avatar
Pan committed
160
```bash
花裤衩's avatar
花裤衩 committed
161
162
# build for test environment
npm run build:sit
163

花裤衩's avatar
花裤衩 committed
164
165
# build for production environment
npm run build:prod
166
167
```

花裤衩's avatar
花裤衩 committed
168
## Advanced
Pan's avatar
Pan committed
169

170
```bash
花裤衩's avatar
花裤衩 committed
171
172
# --report to build with bundle size analytics
npm run build:prod --report
Pan's avatar
refine    
Pan committed
173

花裤衩's avatar
花裤衩 committed
174
175
176
# --generate a bundle size analytics. default: bundle-report.html
npm run build:prod --generate_report

花裤衩's avatar
花裤衩 committed
177
178
# --preview to start a server in local to preview
npm run build:prod --preview
Pan's avatar
Pan committed
179

花裤衩's avatar
花裤衩 committed
180
181
# lint code
npm run lint
Pan's avatar
refine    
Pan committed
182

花裤衩's avatar
花裤衩 committed
183
184
# auto fix
npm run lint -- --fix
Pan's avatar
refine    
Pan committed
185
186
```

Pan's avatar
Pan committed
187
Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
花裤衩's avatar
花裤衩 committed
188

Pan's avatar
Pan committed
189
## Changelog
Pan's avatar
Pan committed
190

Pan's avatar
Pan committed
191
192
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).

193
## Online Demo
Pan's avatar
Pan committed
194

花裤衩's avatar
花裤衩 committed
195
[Preview](http://panjiachen.github.io/vue-element-admin)
Pan's avatar
Pan committed
196
197

## Donate
Pan's avatar
Pan committed
198

花裤衩's avatar
花裤衩 committed
199
200
201
202
203
If you find this project useful, you can buy author a glass of juice :tropical_drink:

![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png)

[Paypal Me](https://www.paypal.me/panfree23)
花裤衩's avatar
花裤衩 committed
204

花裤衩's avatar
花裤衩 committed
205
206
[Buy me a coffee](https://www.buymeacoffee.com/Pan)

Pan's avatar
Pan committed
207
208
209
210
211
212
213
214
## Browsers support

Modern browsers and Internet Explorer 10+.

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions

花裤衩's avatar
花裤衩 committed
215
216
## License

花裤衩's avatar
花裤衩 committed
217
218
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)

Pan's avatar
Pan committed
219
Copyright (c) 2017-present PanJiaChen