提交 | 用户 | age
|
743789
|
1 |
<p align="center"> |
C |
2 |
<a href="https://github.com/anncwb/vue-vben-admin" target="_blank"> |
|
3 |
<img alt="VbenAdmin Logo" width="200" src="./.github/res/imgs/logo.png"> |
|
4 |
</a> |
|
5 |
</p> |
|
6 |
<h2 align="center">VUE VBEN ADMIN2.0</h2> |
|
7 |
|
|
8 |
[Chinese](./README.md) | **English** |
|
9 |
|
|
10 |
[CHANGELOG](CHANGELOG.md) |
|
11 |
|
|
12 |
- [Introduction](#Introduction) |
|
13 |
- [GitHub](#Github) |
|
14 |
- [Preview](#Preview) |
|
15 |
- [Documentation](#Documentation) |
|
16 |
- [Preinstallation](#Preinstallation) |
|
17 |
- [Environmental requirements](#Environmental requirements) |
|
18 |
- [UI framework](#ui framework) |
|
19 |
- [Icon](#Icon) |
|
20 |
- [Plugin](#Plugin) |
|
21 |
- [Suggested development environment](#Suggested development environment) |
|
22 |
- [Install](#Install) |
|
23 |
- [Usage](#Usage) |
|
24 |
- [Development environment](#Development environment) |
|
25 |
- [Build](#Build) |
|
26 |
- [Format](#Format) |
|
27 |
- [Other](#Other) |
|
28 |
- [Git submit specifications](#git submit specifications) |
|
29 |
- [Code ontribution](#Code ontribution) |
|
30 |
- [Finished features](#Finished features) |
|
31 |
- [Developing features](#Developing features) |
|
32 |
- [Join us](#Join us) |
|
33 |
|
|
34 |
## Introduction |
|
35 |
|
|
36 |
This branch is a 2.0 new branch which use vue3 to develop. |
|
37 |
|
|
38 |
You can also switch to 1.0 branch which use `vue2.6` , `vue-composition-api` and `vue-cli` to develop. |
|
39 |
|
|
40 |
The project is based on the vue3 style background management system implemented by `ant-design-vue`,`typescript`,`vue3.0`,`vite`,`tsx`. |
|
41 |
|
|
42 |
## GitHub |
|
43 |
|
|
44 |
[vue-vben-admin2.0](https://github.com/anncwb/vue-vben-admin) - `main` branch |
|
45 |
|
|
46 |
## Preview |
|
47 |
|
|
48 |
[2.0 preview](https://vvbin.cn/next/) |
|
49 |
|
|
50 |
Account for test: vben/123456 |
|
51 |
|
|
52 |
<p align="center"> |
|
53 |
<img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview1.png"> |
|
54 |
<img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview2.png"> |
|
55 |
<img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview3.png"> |
|
56 |
</p> |
|
57 |
|
|
58 |
## Documentation |
|
59 |
|
|
60 |
The documentation for 2.0 hasn't started yet, it will be provided later. |
|
61 |
|
|
62 |
## Preinstallation |
|
63 |
|
|
64 |
### Environmental requirements |
|
65 |
|
|
66 |
- `Node.js`: - Version>`12.0.0` is better. |
|
67 |
- `yarn` > `npm` > `cnpm`: - Package management tool. |
|
68 |
|
|
69 |
### UI framework |
|
70 |
|
|
71 |
- [Tailwind CSS](https://tailwindcss.com/) - 2.0.0-beta.5 has deleted. |
|
72 |
- [Ant Design Vue 2.0](https://2x.antdv.com/docs/vue/introduce-cn/) |
|
73 |
|
|
74 |
### Icon |
|
75 |
|
|
76 |
- [Ant Design Vue Icon Component](https://2x.antdv.com/components/icon-cn/) - Icon which is imported on demand. |
|
77 |
- [Iconify](https://iconify.design) - Icon can be used [Icônes](https://icones.netlify.app/) |
|
78 |
- [PurgeIcons](https://github.com/antfu/purge-icons) - Icon which is used by build. |
|
79 |
|
|
80 |
### Plugin |
|
81 |
|
|
82 |
- [Vue Router Next](https://github.com/vuejs/vue-router-next) |
|
83 |
- [Vuex Next](https://github.com/vuejs/vuex) |
|
84 |
- [vuex-module-decorators](https://github.com/championswimmer/vuex-module-decorators) - vuex modular |
|
85 |
- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - Mock plugin base on vite |
|
86 |
- [vue-i18n](https://github.com/intlify/vue-i18n-next) - Internationalization |
|
87 |
- [lodash-es](https://github.com/lodash/lodash) - JavaScript utility library |
|
88 |
- [moment](https://github.com/moment/moment) - Time operation library |
|
89 |
- [axios](https://github.com/axios/axios) - Http data interaction |
|
90 |
- [TypeScript](https://www.typescriptlang.org/) |
|
91 |
|
|
92 |
### Suggested development environment |
|
93 |
|
|
94 |
- `Git`: - Tool of version management |
|
95 |
- `Visual Studio Code` - (VSCode): Latest version |
|
96 |
- [VS Code Extensions](./.vscode/extensions.json) |
|
97 |
- [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) |
|
98 |
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - Tailwind css style association |
|
99 |
- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) - Essential for vue development |
|
100 |
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Checking script code |
|
101 |
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Code formatting |
|
102 |
- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - Css formatting |
|
103 |
|
|
104 |
## Install |
|
105 |
|
|
106 |
```js |
|
107 |
// Make git case sensitive to file names |
|
108 |
git config core.ignorecase false |
|
109 |
|
|
110 |
// Pull code of the project |
|
111 |
git clone https://github.com/anncwb/vue-vben-admin.git vue-vben-admin-2.0 |
|
112 |
|
|
113 |
cd vue-vben-admin-2.0 |
|
114 |
|
|
115 |
// If you use other package management tool, you can install it by yourself |
|
116 |
// if you hasn't install yarn, please run: npm install -g yarn |
|
117 |
yarn install |
|
118 |
|
|
119 |
``` |
|
120 |
|
|
121 |
## Usage |
|
122 |
|
|
123 |
### Development environment |
|
124 |
|
|
125 |
```bash |
|
126 |
yarn serve |
|
127 |
``` |
|
128 |
|
|
129 |
### Build |
|
130 |
|
|
131 |
```bash |
|
132 |
|
|
133 |
yarn build # build |
|
134 |
|
|
135 |
yarn build:no-cache # build, cache will be removed before build |
|
136 |
|
|
137 |
yarn report # Generate build package report preview |
|
138 |
``` |
|
139 |
|
|
140 |
### Format |
|
141 |
|
|
142 |
```bash |
|
143 |
yarn lint:stylelint # css formatting |
|
144 |
|
|
145 |
yarn lint:prettier # js/ts code formatting |
|
146 |
``` |
|
147 |
|
|
148 |
### Other |
|
149 |
|
|
150 |
```bash |
|
151 |
yarn reinstall # Remove dependencies and reinstall, supported window |
|
152 |
|
|
153 |
yarn preview # Build and preview in local |
|
154 |
|
|
155 |
yarn log # Generate CHANGELOG |
|
156 |
|
|
157 |
yarn clean:cache # Delete cache |
|
158 |
|
|
159 |
yarn clean:lib # Delete node_modules, supported window |
|
160 |
``` |
|
161 |
|
|
162 |
## Git submit specifications |
|
163 |
|
|
164 |
- Refer to [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specifications ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular)) |
|
165 |
|
|
166 |
- `feat` Add new features |
|
167 |
- `fix` Fix problem/BUG |
|
168 |
- `style` Code style related and doesn't affect the running result |
|
169 |
- `perf` Optimization/performance improvement |
|
170 |
- `refactor` Refactor |
|
171 |
- `revert` Undo edit |
|
172 |
- `test` Test related |
|
173 |
- `docs` Documentation/notes |
|
174 |
- `chore` Dependent update/scaffolding configuration modification etc |
|
175 |
- `workflow` Workflow improvements |
|
176 |
- `ci` Continuous integration |
|
177 |
- `types` Update file of type definition |
|
178 |
- `wip` Developing |
|
179 |
|
|
180 |
## Code contribution |
|
181 |
|
|
182 |
1. Fork code! |
|
183 |
2. Create your own branch: `git checkout -b feat/xxxx` |
|
184 |
3. Submit your changes: `git commit -am 'feat(function): add xxxxx'` |
|
185 |
4. Push your branch: `git push origin feat/xxxx` |
|
186 |
5. submit`pull request` |
|
187 |
|
|
188 |
## Finished features |
|
189 |
|
|
190 |
- [x] Project construction (based on vite)) |
|
191 |
- [x] Login and exit |
|
192 |
- [x] Menu (can search, drag and drop and menu layout) |
|
193 |
- [x] Multiple tabs/breadcrumbs |
|
194 |
- [x] Permission management base on role |
|
195 |
- [x] Permission management base on background |
|
196 |
- [x] The separation of routing and menu settings |
|
197 |
- [x] Collapsible sidebar |
|
198 |
- [x] Draggable sidebar |
|
199 |
- [x] Multi-tab mode/global control |
|
200 |
- [x] Menu search |
|
201 |
- [x] Page loading |
|
202 |
- [x] Scroll bar component |
|
203 |
- [x] Pop-up window expansion (dragable, full screen, adaptive height) |
|
204 |
- [x] Mock data |
|
205 |
- [x] hook Package |
|
206 |
- [x] Form component |
|
207 |
- [x] Right-click menu |
|
208 |
- [x] Watermark plugin |
|
209 |
- [x] Animation component |
|
210 |
- [x] QR code plugin |
|
211 |
- [x] Internationalization plugin |
|
212 |
- [x] Details component |
|
213 |
- [x] Validation component |
|
214 |
- [x] Tree component |
|
215 |
- [x] Picture preview component |
|
216 |
- [x] Table component |
|
217 |
- [x] Chart library |
|
218 |
- [x] Digital animation |
|
219 |
- [x] First screen loading waiting animation |
|
220 |
- [x] Extract the production environment profile |
|
221 |
|
|
222 |
## Developing features |
|
223 |
|
|
224 |
- [ ] Upload component |
|
225 |
- [ ] Rich text component |
|
226 |
- [ ] Data import and export |
|
227 |
- [ ] Global error handling |
|
228 |
- [ ] Theme configuration |
|
229 |
- [ ] Dark theme |
|
230 |
- [ ] Build Gzip |
|
231 |
- [ ] Build CDN |
|
232 |
- [ ] System performance optimization |
|
233 |
|
|
234 |
If you have more components/functions/suggestions/bugs/, welcome to submit pr or issue. |