|
| 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 | + |
| 117 | + |
| 118 | +#### Realtime switching themes |
| 119 | + |
| 120 | + |
| 121 | + |
| 122 | +#### Collapsing sidebar |
| 123 | + |
| 124 | + |
| 125 | + |
| 126 | +#### Drag & drop sorting |
| 127 | + |
| 128 | + |
| 129 | + |
| 130 | +#### Uploading cropped avatar |
| 131 | + |
| 132 | + |
| 133 | + |
| 134 | +#### Error log |
| 135 | + |
| 136 | + |
| 137 | + |
| 138 | +#### Rich text (integrated with qiniu, watermark and customization) |
| 139 | + |
| 140 | + |
| 141 | + |
| 142 | +#### Packaging table component |
| 143 | + |
| 144 | + |
| 145 | + |
| 146 | +#### Charts |
| 147 | + |
| 148 | + |
| 149 | + |
| 150 | +#### Exporting to Excel |
| 151 | + |
| 152 | + |
| 153 | + |
| 154 | +#### More |
| 155 | + |
| 156 | +http://panjiachen.github.io/vue-element-admin |
0 commit comments