Commit 74378960345e706b45fab1f39fba045a1e95a547
Committed by
GitHub
1 parent
7c4dd244
feat: add README.en-US.md (#37)
Showing
2 changed files
with
235 additions
and
1 deletions
README.en-US.md
0 → 100644
1 | +<p align="center"> | ||
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. |
README.md