README.md 6.1 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
docs    
Pan committed
10
    <img src="https://img.shields.io/badge/element--ui-2.4.6-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

花裤衩's avatar
花裤衩 committed
72
## Features
Pan's avatar
Pan committed
73

花裤衩's avatar
花裤衩 committed
74
75
```
- Login / Logout
Pan's avatar
Pan committed
76
77
78
79
80
81

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

花裤衩's avatar
花裤衩 committed
82
- Multi-environment build
Pan's avatar
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
  - dev sit stage prod

- Global Features
  - I18n
  - Multiple dynamic themes
  - Dynamic sidebar (supports multi-level routing)
  - Dynamic breadcrumb
  - Tags-view(Tab page Support right-click operation)
  - 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
  - Drag Kanban
  - Drag List
  - SplitPane
  - Dropzone
  - Sticky
  - CountTo

- Advanced Example
- Error Log
Pan's avatar
Pan committed
130
- Dashboard
花裤衩's avatar
花裤衩 committed
131
- Guide Page
Pan's avatar
Pan committed
132
- ECharts
花裤衩's avatar
花裤衩 committed
133
- Clipboard
134
- Markdown to html
花裤衩's avatar
花裤衩 committed
135
136
137
```

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

Pan's avatar
refine    
Pan committed
139
```bash
Pan's avatar
Pan committed
140
# clone the project
花裤衩's avatar
花裤衩 committed
141
git clone https://github.com/PanJiaChen/vue-element-admin.git
Pan's avatar
refine    
Pan committed
142

花裤衩's avatar
花裤衩 committed
143
144
# install dependency
npm install
Pan's avatar
refine    
Pan committed
145

花裤衩's avatar
花裤衩 committed
146
147
# develop
npm run dev
Pan's avatar
refine    
Pan committed
148
```
Pan's avatar
refine    
Pan committed
149

花裤衩's avatar
花裤衩 committed
150
151
152
This will automatically open http://localhost:9527.

## Build
Pan's avatar
Pan committed
153

Pan's avatar
Pan committed
154
```bash
花裤衩's avatar
花裤衩 committed
155
156
# build for test environment
npm run build:sit
157

花裤衩's avatar
花裤衩 committed
158
159
# build for production environment
npm run build:prod
160
161
```

花裤衩's avatar
花裤衩 committed
162
## Advanced
Pan's avatar
Pan committed
163

164
```bash
花裤衩's avatar
花裤衩 committed
165
166
# --report to build with bundle size analytics
npm run build:prod --report
Pan's avatar
refine    
Pan committed
167

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

花裤衩's avatar
花裤衩 committed
171
172
# --preview to start a server in local to preview
npm run build:prod --preview
Pan's avatar
Pan committed
173

花裤衩's avatar
花裤衩 committed
174
175
# lint code
npm run lint
Pan's avatar
refine    
Pan committed
176

花裤衩's avatar
花裤衩 committed
177
178
# auto fix
npm run lint -- --fix
Pan's avatar
refine    
Pan committed
179
180
```

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

Pan's avatar
Pan committed
183
## Changelog
Pan's avatar
Pan committed
184

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

187
## Online Demo
Pan's avatar
Pan committed
188

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

## Donate
Pan's avatar
Pan committed
192

花裤衩's avatar
花裤衩 committed
193
194
195
196
197
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
198

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

花裤衩's avatar
花裤衩 committed
201
202
## License

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

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