From 166781d8a237ee94f1fecab8f8801a2543c172c9 Mon Sep 17 00:00:00 2001 From: wyudong Date: Fri, 12 May 2017 13:26:19 +0800 Subject: [PATCH] Add README in English --- README-en.md | 156 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 README-en.md diff --git a/README-en.md b/README-en.md new file mode 100644 index 00000000..27b8ccd6 --- /dev/null +++ b/README-en.md @@ -0,0 +1,156 @@ +## 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 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! + +**Online demo:** http://panjiachen.github.io/vue-element-admin + +More tutorials incoming. Including articles on: + +- How to build structure of a backend dashboard project from scratch +- How to make a complete user system (e.g. permission authentication, two-factor authentication) +- How to package components (e.g. rich text) +- How to integrate with [qiniu](https://www.qiniu.com/) +- Other development experience on backend + +Join the group on QQ 591724180. + +**Live tutorials:** + +- [Step by step instructions on playing with backend using Vue - Part 1](https://juejin.im/post/59097cd7a22b9d0065fb61d2) +- [Step by step instructions on packaging a Vue component](https://segmentfault.com/a/1190000009090836) + +## 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 +- Exporting to Excel +- Table example +- Interactive table example +- Drag & drop table example +- Form example +- Multi-environments distribution +- Dashboard +- Two-factor authentication +- Collapsing sidebar +- Mock data + +## Development + +```bash +# Clone project +git clone https://github.com/PanJiaChen/vue-element-admin.git + +# Install dependencies +npm install + +# Not recommended for cnpm due to unknown bugs, use taobao mirror instead +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 + +```shell +├── 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 +│   ├── jquery +│   └── Tinymce // rich text +├── .babelrc // babel-loader config +├── eslintrc.js // eslint config +├── .gitignore // gitignore +├── favicon.ico // favicon +├── index.html // html template +└── package.json // package.json +``` + +## 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) + +#### Collapsing sidebar + +![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif) + +#### Drag & drop sorting + +![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif) + +#### 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) + +#### Rich text (integrated with qiniu, watermark and customization) + +![](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