admin-fe/README-en.md

178 lines
5.9 KiB
Markdown
Raw Normal View History

2017-09-11 02:56:28 +00:00
[![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)]()
2017-05-12 05:26:19 +00:00
## Intro
> 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.
2017-05-12 05:26:19 +00:00
2017-05-16 05:01:46 +00:00
**Live demo:** http://panjiachen.github.io/vue-element-admin
2017-05-12 05:26:19 +00:00
2017-09-11 02:56:28 +00:00
**Note: element-ui@1.4.2 is used in the project, so vue 2.3.0+ is required.**
2017-05-12 05:26:19 +00:00
2017-09-11 02:56:28 +00:00
- 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)
2017-05-16 05:01:46 +00:00
2017-05-12 05:26:19 +00:00
## 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
2017-09-27 02:43:53 +00:00
- Export Excel
2017-09-11 06:43:12 +00:00
- Upload Excel
2017-09-27 02:43:53 +00:00
- Export Zip
2017-05-12 05:26:19 +00:00
- Table example
- Interactive table example
- Drag & drop table example
- Form example
- Multi-environments distribution
- Dashboard
- Two-factor authentication
2017-05-31 07:55:56 +00:00
- Collapsing sidebar (support nested routes)
2017-05-12 05:26:19 +00:00
- Mock data
2017-06-15 06:44:26 +00:00
- cache tabs example
- screenfull
- markdown2html
2017-06-23 09:38:30 +00:00
- views-tab
2017-09-27 02:43:53 +00:00
- clipboard
2017-05-12 05:26:19 +00:00
## Development
```bash
# Clone project
git clone https://github.com/PanJiaChen/vue-element-admin.git
# Install dependencies
npm install
2017-05-22 14:38:27 +00:00
# Or (not recommended for cnpm due to unknown bugs, use taobao mirror instead)
2017-05-12 05:26:19 +00:00
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
```
2017-05-12 05:26:19 +00:00
├── 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
```
2017-05-31 10:28:06 +00:00
## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
2017-09-11 02:56:28 +00:00
## Donate
If you find this project useful, you can buy me a cup of coffee
![donate](https://panjiachen.github.io/donate/donation.png)
2017-05-12 05:26:19 +00:00
## 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)
2017-06-28 08:00:56 +00:00
#### tabs
![tabs](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/tabs.gif)<br />
2017-05-12 05:26:19 +00:00
#### Collapsing sidebar
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)
2017-05-22 14:49:34 +00:00
#### Drag & drop table
2017-05-12 05:26:19 +00:00
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)
2017-05-22 14:49:34 +00:00
#### Interactive table
2017-05-22 05:46:11 +00:00
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/dynamictable.gif)
2017-05-12 05:26:19 +00:00
#### 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)
2017-05-22 14:38:27 +00:00
#### Rich text (integrated with Qiniu, watermark and customization)
2017-05-12 05:26:19 +00:00
![](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
2017-09-11 02:56:28 +00:00
## License
MIT