Skip to content

Commit 93f6b61

Browse files
wyudongPanJiaChen
authored andcommitted
Add README in English
1 parent cacead1 commit 93f6b61

File tree

1 file changed

+156
-0
lines changed

1 file changed

+156
-0
lines changed

README-en.md

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
## Intro
2+
3+
> 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 the data requests are generated with [Mock.js](https://github.com/nuysoft/Mock). **Notes:** if anyone wants to modify or develop based on this project, please remove mock files, otherwise all the requests will be passed through proxy!
4+
5+
**Online demo:** http://panjiachen.github.io/vue-element-admin
6+
7+
More tutorials incoming. Including articles on:
8+
9+
- How to build structure of a backend dashboard project from scratch
10+
- How to make a complete user system (e.g. permission authentication, two-factor authentication)
11+
- How to package components (e.g. rich text)
12+
- How to integrate with [qiniu](https://www.qiniu.com/)
13+
- Other development experience on backend
14+
15+
Join the group on QQ 591724180.
16+
17+
**Live tutorials:**
18+
19+
- [Step by step instructions on playing with backend using Vue - Part 1](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
20+
- [Step by step instructions on packaging a Vue component](https://segmentfault.com/a/1190000009090836)
21+
22+
## Features
23+
24+
- Login/Logout
25+
- Permission authentication
26+
- Sidebar
27+
- Breadcrumb
28+
- Rich text editor
29+
- Markdown editor
30+
- JSON editor
31+
- Drag & drop list
32+
- SplitPane
33+
- Dropzone
34+
- Sticky
35+
- CountTo
36+
- ECharts
37+
- 401, 404 error page
38+
- Error log
39+
- Exporting to Excel
40+
- Table example
41+
- Interactive table example
42+
- Drag & drop table example
43+
- Form example
44+
- Multi-environments distribution
45+
- Dashboard
46+
- Two-factor authentication
47+
- Collapsing sidebar
48+
- Mock data
49+
50+
## Development
51+
52+
```bash
53+
# Clone project
54+
git clone https://github.com/PanJiaChen/vue-element-admin.git
55+
56+
# Install dependencies
57+
npm install
58+
59+
# Not recommended for cnpm due to unknown bugs, use taobao mirror instead
60+
npm install --registry=https://registry.npm.taobao.org
61+
62+
# Run local dev server
63+
npm run dev
64+
```
65+
66+
Visit in browser: http://localhost:9527
67+
68+
## Distribution
69+
70+
```bash
71+
# Build staged environment with webpack-bundle-analyzer
72+
npm run build:sit-preview
73+
74+
# Build production environment
75+
npm run build:prod
76+
```
77+
78+
## Directory structure
79+
80+
```shell
81+
├── build // build 
82+
├── config // config
83+
├── src // source code
84+
│   ├── api // all requests
85+
│   ├── assets // static resource like themes, fonts
86+
│   ├── components // global public components
87+
│   ├── directive // global directive
88+
│   ├── filters // global filters
89+
│   ├── mock // mock data
90+
│   ├── router // router
91+
│   ├── store // global status management
92+
│   ├── styles // global styles
93+
│   ├── utils // global public functions
94+
│   ├── view // view
95+
│   ├── App.vue // entry view
96+
│   └── main.js // entry for loading components, initialization
97+
├── static // third-party libraries not packed with Webpack
98+
│   ├── jquery
99+
│   └── Tinymce // rich text
100+
├── .babelrc // babel-loader config
101+
├── eslintrc.js // eslint config
102+
├── .gitignore // gitignore
103+
├── favicon.ico // favicon
104+
├── index.html // html template
105+
└── package.json // package.json
106+
```
107+
108+
## State Management
109+
110+
Only status of user and app configuration is managed by Vuex. Other data are managed by their own business pages.
111+
112+
## Demo
113+
114+
#### Two-factor authentication, supporting WeChat and QQ
115+
116+
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif)
117+
118+
#### Realtime switching themes
119+
120+
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)
121+
122+
#### Collapsing sidebar
123+
124+
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)
125+
126+
#### Drag & drop sorting
127+
128+
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)
129+
130+
#### Uploading cropped avatar
131+
132+
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)
133+
134+
#### Error log
135+
136+
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)
137+
138+
#### Rich text (integrated with qiniu, watermark and customization)
139+
140+
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)
141+
142+
#### Packaging table component
143+
144+
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif)
145+
146+
#### Charts
147+
148+
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif)
149+
150+
#### Exporting to Excel
151+
152+
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png)
153+
154+
#### More
155+
156+
http://panjiachen.github.io/vue-element-admin

0 commit comments

Comments
 (0)