README-en.md 5.86 KB
Newer Older
Pan's avatar
Pan committed
1
2
3
4
5
[![vue](https://img.shields.io/badge/vue-2.4.2-brightgreen.svg)](https://github.com/vuejs/vue)
[![element-ui](https://img.shields.io/badge/element--ui-1.4.2-brightgreen.svg)](https://github.com/ElemeFE/element)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()

wyudong's avatar
wyudong committed
6
7
## Intro

8
> In the past half year, I have been building a backend for management dashboard using Vue. Though the backend has contained greater than 70 pages and over 10 permissions, it still takes insignificant effort to maintain the project. So I decide to make it open source so as to share my development experience and progress on backend. The tech stack is mainly [Vue.js](https://github.com/vuejs/vue)+[Element](https://github.com/ElemeFE/element)+[axios](https://github.com/mzabriskie/axios). Since it's a personal project, all data requests are simulated with [Mock.js](https://github.com/nuysoft/Mock). **Note:** if anyone wants to modify or develop based on this project, please remove the mock files.
wyudong's avatar
wyudong committed
9

wyudong's avatar
wyudong committed
10
**Live demo:** http://panjiachen.github.io/vue-element-admin
wyudong's avatar
wyudong committed
11

Pan's avatar
Pan committed
12
**Note: element-ui@1.4.2 is used in the project, so vue 2.3.0+ is required.**
wyudong's avatar
wyudong committed
13

Pan's avatar
Pan committed
14
15
16
 - vueAdmin-template: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
 - electron-vue-admin: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
 - Donate:[donate](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md#donate)
wyudong's avatar
wyudong committed
17

wyudong's avatar
wyudong committed
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
## Features

- Login/Logout
- Permission authentication
- Sidebar
- Breadcrumb
- Rich text editor
- Markdown editor
- JSON editor
- Drag & drop list
- SplitPane
- Dropzone
- Sticky
- CountTo
- ECharts
- 401, 404 error page
- Error log
Pan's avatar
Pan committed
35
- Export Excel
Pan's avatar
Pan committed
36
- Upload Excel
Pan's avatar
Pan committed
37
- Export Zip
wyudong's avatar
wyudong committed
38
39
40
41
42
43
44
- Table example
- Interactive table example
- Drag & drop table example
- Form example
- Multi-environments distribution
- Dashboard
- Two-factor authentication
Pan's avatar
Pan committed
45
- Collapsing sidebar (support nested routes)
wyudong's avatar
wyudong committed
46
- Mock data
Pan's avatar
Pan committed
47
48
49
- cache tabs example
- screenfull
- markdown2html
Pan's avatar
Pan committed
50
- views-tab
Pan's avatar
Pan committed
51
- clipboard
wyudong's avatar
wyudong committed
52
53
54
55
56
57
58
59
60
61

## Development

```bash
# Clone project
git clone https://github.com/PanJiaChen/vue-element-admin.git

# Install dependencies
npm install

wyudong's avatar
wyudong committed
62
# Or (not recommended for cnpm due to unknown bugs, use taobao mirror instead)
wyudong's avatar
wyudong committed
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
npm install --registry=https://registry.npm.taobao.org

# Run local dev server
npm run dev
```

Visit in browser: http://localhost:9527

## Distribution

```bash
# Build staged environment with webpack-bundle-analyzer
npm run build:sit-preview

# Build production environment
npm run build:prod
```

## Directory structure

83
```
wyudong's avatar
wyudong committed
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
├── build                      // build 
├── config                     // config
├── src                        // source code
│   ├── api                    // all requests
│   ├── assets                 // static resource like themes, fonts
│   ├── components             // global public components
│   ├── directive              // global directive
│   ├── filters                // global filters
│   ├── mock                   // mock data
│   ├── router                 // router
│   ├── store                  // global status management
│   ├── styles                 // global styles
│   ├── utils                  // global public functions
│   ├── view                   // view
│   ├── App.vue                // entry view
│   └── main.js                // entry for loading components, initialization
├── static                     // third-party libraries not packed with Webpack
│   └── Tinymce                // rich text
├── .babelrc                   // babel-loader config
├── eslintrc.js                // eslint config
├── .gitignore                 // gitignore
├── favicon.ico                // favicon
├── index.html                 // html template
└── package.json               // package.json
```

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

Pan's avatar
Pan committed
113
114
115
116
## Donate
If you find this project useful, you can buy me a cup of coffee
![donate](https://panjiachen.github.io/donate/donation.png)

wyudong's avatar
wyudong committed
117
118
119
120
121
122
123
124
125
126
127
128
129
130
## State Management

Only status of user and app configuration is managed by Vuex. Other data are managed by their own business pages.

## Demo

#### Two-factor authentication, supporting WeChat and QQ

![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif)

#### Realtime switching themes

![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)

Pan's avatar
Pan committed
131
132
133
134
#### tabs

![tabs](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/tabs.gif)<br />

wyudong's avatar
wyudong committed
135
136
137
138
#### Collapsing sidebar

![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)

wyudong's avatar
wyudong committed
139
#### Drag & drop table
wyudong's avatar
wyudong committed
140
141
142

![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)

wyudong's avatar
wyudong committed
143
#### Interactive table
Pan's avatar
Pan committed
144
145
146

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

wyudong's avatar
wyudong committed
147
148
149
150
151
152
153
154
#### Uploading cropped avatar

![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)

#### Error log

![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)

wyudong's avatar
wyudong committed
155
#### Rich text (integrated with Qiniu, watermark and customization)
wyudong's avatar
wyudong committed
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173

![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)

#### Packaging table component

![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif)

#### Charts

![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif)

#### Exporting to Excel

![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png)

#### More

http://panjiachen.github.io/vue-element-admin
Pan's avatar
Pan committed
174
175
176
177

## License

MIT