From baf406e7e271ac90faa3aec31ceb44715331d9d0 Mon Sep 17 00:00:00 2001 From: clddup <105873086+clddup@users.noreply.github.com> Date: 星期五, 19 七月 2024 16:47:21 +0800 Subject: [PATCH] chore: 格式化代码 (#3972) --- README.md | 295 +++++++++++++++++++++------------------------------------- 1 files changed, 107 insertions(+), 188 deletions(-) diff --git a/README.md b/README.md index c13d309..25cf715 100644 --- a/README.md +++ b/README.md @@ -1,186 +1,123 @@ -<p align="center"> - <a href="https://github.com/anncwb/vue-vben-admin" target="_blank"> - <img alt="VbenAdmin Logo" width="200" src="/anncwb/vue-vben-admin/raw/main/.github/res/imgs/logo.png"> - </a> -</p> -<h2 align="center">VUE VBEN ADMIN2.0</h2> +<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="200" height="200" src="https://anncwb.github.io/anncwb/images/logo.png"> </a> <br> <br> -[Chinese](./README.zh-CN.md) | **English** +[](LICENSE) -[CHANGELOG](CHANGELOG.en_US.md) +<h1>Vue vben admin</h1> +</div> -- [Introduction](#introduction) -- [GitHub](#github) - - [Thin](#thin) -- [Preview](#preview) -- [Documentation](#documentation) -- [Preinstallation](#preinstallation) - - [Environmental requirements](#environmental-requirements) - - [UI framework](#ui-framework) - - [Icon](#icon) - - [Plugin](#plugin) - - [Suggested development environment](#suggested-development-environment) -- [Install](#install) -- [Usage](#usage) - - [Development environment](#development-environment) - - [Build](#build) - - [Format](#format) - - [Other](#other) -- [Git submit specifications](#git-submit-specifications) -- [Code contribution](#code-contribution) -- [Finished features](#finished-features) -- [Developing features](#developing-features) -- [Browser support](#browser-support) -- [Plugins](#plugins) +**English** | [涓枃](./README.zh-CN.md) ## Introduction -The project is based on the vue3 style background management system implemented by 驶ant-design-vue`, `typescript`,`vue3.0`,`vite`,`tsx`, +Vue Vben Admin is a free and open source middle platform/back-end template. Using the latest `vue3`, `vite4`, `TypeScript` and other mainstream technology, Vben is the out-of-the-box front-end solution for both production and learning purpose. -## GitHub +## Features -[vue-vben-admin2.0](https://github.com/anncwb/vue-vben-admin) - `main` branch - -### Thin - -[vue-vben-admin-thin-next](https://github.com/anncwb/vben-admin-thin-next) +- **State-of-art Techinical Stack**锛歎sing the latest and popular front-end technology such as Vue3/vite2 +- **TypeScript**: Application-level JavaScript language +- **Theming**: Configurable themes +- **International**锛欱uilt-in i18n support +- **Response Mock**: Built-in response mock ability +- **Authority**: Built-in permission system based on dynamic routes. +- **Component**: Extracted and encapsulated components for various scenarios. ## Preview -- [2.0 preview](https://vvbin.cn/next/) +- [vue-vben-admin](https://vben.vvbin.cn/) - Full version (Chinese) +- [vue-vben-admin-gh-pages](https://anncwb.github.io/vue-vben-admin/) - Full version (github hosted) +- [vben-admin-thin-next](https://vben.vvbin.cn/thin/next/) - Simplified Version (Chinese) +- [vben-admin-thin-gh-pages](https://anncwb.github.io/vben-admin-thin-next/) -Simplified Version (github hosted) -- [2.0 Thin Preview](https://vvbin.cn/thin/next/) - -Account for test: vben/123456 +Test account: vben/123456 <p align="center"> - <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview1.png"> - <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview2.png"> - <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview3.png"> + <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png"> + <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png"> + <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png"> </p> + +### Use Gitpod + +Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately. + +[](https://gitpod.io/#https://github.com/anncwb/vue-vben-admin) ## Documentation -The documentation for 2.0 hasn't started yet, it will be provided later. +[Document](https://doc.vvbin.cn/) -## Preinstallation +## Preparation -### Environmental requirements +- [node](http://nodejs.org/) and [git](https://git-scm.com/) - Project development environment +- [Vite](https://vitejs.dev/) - Familiar with vite features +- [Vue3](https://v3.vuejs.org/) - Familiar with Vue basic syntax +- [TypeScript](https://www.typescriptlang.org/) - Familiar with the basic syntax of `TypeScript` +- [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax +- [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router +- [Ant-Design-Vue](https://antdv.com/docs/vue/introduce-cn/) - ui basic use +- [Mock.js](https://github.com/nuysoft/Mock) - mockjs basic syntax -- `Node.js`: - Version > `12.0.0` . -- `yarn` : - Package management tool. +## Install and use -### UI framework - -- [Tailwind CSS](https://tailwindcss.com/) - 2.0.0-beta.5 has deleted. -- [Ant Design Vue 2.0](https://2x.antdv.com/docs/vue/introduce-cn/) - -### Icon - -- [Ant Design Vue Icon Component](https://2x.antdv.com/components/icon-cn/) - Icon which is imported on demand. -- [Iconify](https://iconify.design) - Icon can be used [Ic么nes](https://icones.netlify.app/) -- [PurgeIcons](https://github.com/antfu/purge-icons) - Icon which is used by build. - -### Plugin - -- [Vue Router Next](https://github.com/vuejs/vue-router-next) -- [Vuex Next](https://github.com/vuejs/vuex) -- [vuex-module-decorators](https://github.com/championswimmer/vuex-module-decorators) - vuex modular -- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - Mock plugin base on vite -- [vue-i18n](https://github.com/intlify/vue-i18n-next) - Internationalization -- [lodash-es](https://github.com/lodash/lodash) - JavaScript utility library -- [axios](https://github.com/axios/axios) - Http data interaction -- [TypeScript](https://www.typescriptlang.org/) - -### Suggested development environment - -- `Git`: - Tool of version management -- `Visual Studio Code` - (VSCode): Latest version - - [VS Code Extensions](./.vscode/extensions.json) - - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - - [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - Tailwind css style association - - [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) - Essential for vue development - - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Checking script code - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Code formatting - - [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - Css formatting - -## Install +- Get the project code ```bash -# Make git case sensitive to file names -git config core.ignorecase false +git clone https://github.com/vbenjs/vue-vben-admin.git +``` -# Pull code of the project -git clone https://github.com/anncwb/vue-vben-admin.git vue-vben-admin-2.0 +- Install dependencies -cd vue-vben-admin-2.0 +```bash +cd vue-vben-admin -# If you use other package management tool, you can install it by yourself -# if you hasn't install yarn, please run: npm install -g yarn -yarn install +pnpm install ``` -## Usage - -### Development environment +- run ```bash -yarn serve +pnpm serve ``` -### Build +- build ```bash - -yarn build # build - -yarn build:no-cache # build, cache will be removed before build - -yarn report # Generate build package report preview +pnpm build ``` -### Format +- docker + +### The dockerFile is located in the project root directory and supports differential deployment + +#### build image ```bash -yarn lint:stylelint # css formatting - -yarn lint:prettier # js/ts code formatting +docker build -t vue-vben-admin . ``` -### Other +#### Use environment variables to achieve differentiated container deployment. Specify service endpoint by assigning `VG_BASE_URL`. In the following example, `http://localhost:3333` is used as the back-end service address and the container is mapped to port `6666`: ```bash -yarn reinstall # Remove dependencies and reinstall, supported window - -yarn preview # Build and preview in local - -yarn log # Generate CHANGELOG - -yarn clean:cache # Delete cache - -yarn clean:lib # Delete node_modules, supported window +docker run --name vue-vben-admin -d -p 6666:80 -e VG_BASE_URL=http://localhost:3333 vue-vben-admin ``` -## Git submit specifications +Then you can navigate to `http://localhost:6666` -- 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)) +## Change Log - - `feat` Add new features - - `fix` Fix problem/BUG - - `style` Code style related and doesn't affect the running result - - `perf` Optimization/performance improvement - - `refactor` Refactor - - `revert` Undo edit - - `test` Test related - - `docs` Documentation/notes - - `chore` Dependent update/scaffolding configuration modification etc - - `workflow` Workflow improvements - - `ci` Continuous integration - - `types` Update file of type definition - - `wip` Developing +[CHANGELOG](./CHANGELOG.zh_CN.md) -## Code contribution +## Project + +- [vue-vben-admin](https://github.com/anncwb/vue-vben-admin) - full version +- [vue-vben-admin-thin-next](https://github.com/anncwb/vben-admin-thin-next) - Simplified version + +## How to contribute + +You are very welcome to join锛乕Raise an issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) or submit a Pull Request銆� + +**Pull Request:** 1. Fork code! 2. Create your own branch: `git checkout -b feat/xxxx` @@ -188,73 +125,55 @@ 4. Push your branch: `git push origin feat/xxxx` 5. submit`pull request` -## Finished features +## Git Contribution submission specification -- [x] Project construction (based on vite锛�) -- [x] Login and exit -- [x] Menu (can search, drag and drop and menu layout) -- [x] Multiple tabs/breadcrumbs -- [x] Permission management base on role -- [x] Permission management base on background -- [x] The separation of routing and menu settings -- [x] Collapsible sidebar -- [x] Draggable sidebar -- [x] Multi-tab mode/global control -- [x] Menu search -- [x] Page loading -- [x] Scroll bar component -- [x] Pop-up window expansion (dragable, full screen, adaptive height) -- [x] Mock data -- [x] hook Package -- [x] Form component -- [x] Right-click menu -- [x] Watermark plugin -- [x] Animation component -- [x] QR code plugin -- [x] Internationalization plugin -- [x] Details component -- [x] Validation component -- [x] Tree component -- [x] Picture preview component -- [x] Table component -- [x] Chart library -- [x] Digital animation -- [x] First screen loading waiting animation -- [x] Extract the production environment profile -- [x] Build Gzip -- [x] System performance optimization -- [x] Data import and export -- [x] Global error handling -- [x] Rich text component -- [x] Upload component +- reference [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specification ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular)) -## Developing features + - `feat` Add new features + - `fix` Fix the problem/BUG + - `style` Modify the code style/format that does not affect the feature + - `perf` Optimization/performance improvement + - `refactor` Refactor + - `revert` Undo edit + - `test` Test related + - `docs` Documentation/notes + - `chore` Dependency update/scaffolding configuration modification etc. + - `workflow` Workflow improvements + - `ci` Continuous integration + - `types` Type definition file changes + - `wip` In development -- [ ] Theme configuration -- [ ] Dark theme -- [ ] Build CDN +## Related warehouse -If you have more components/functions/suggestions/bugs/, welcome to submit pr or issue. +If these plugins are helpful to you, you can show support by leaving a star! + +- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - Used for local and development environment data mock +- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) - Used for html template conversion and compression +- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - Used to pack input .gz|.brotil files +- [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - Used to quickly generate svg sprite ## Browser support -It is recommended to use the `Chrome` browser for local development. Development in the Firefox browser is relatively slow. +The `Chrome 80+` browser is recommended for local development -Support modern browsers, Not currently supported ie11锛孎ollow-up consideration support ie11 +Support modern browsers, doesn't include IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | | :-: | :-: | :-: | :-: | :-: | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions | -More browsers can view [Can I Use Es Module](https://caniuse.com/?search=ES%20Module) +## Maintainer -## Plugins +[@Vben](https://github.com/anncwb) [@Jinmao](https://github.com/jinmao88) -If these plugins are helpful to you, you can give a star +## Thanks -- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) -- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) -- [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) -- [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme) -- [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin) -- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) +<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" alt="JetBrains Logo (Main) logo." height="120"> + +## Star History Chart + +[](https://star-history.com/#vbenjs/vue-vben-admin&Date) + +## License + +[MIT 漏 Vben-2020](./LICENSE) -- Gitblit v1.8.0