vent-forewarn-micro

VUE VBEN ADMIN2.0

[Chinese](./README.md) | **English** [CHANGELOG](CHANGELOG.md) - [Introduction](#Introduction) - [GitHub](#Github) - [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 ontribution](#Code ontribution) - [Finished features](#Finished features) - [Developing features](#Developing features) - [Join us](#Join us) ## Introduction This branch is a 2.0 new branch which use vue3 to develop. You can also switch to 1.0 branch which use `vue2.6` , `vue-composition-api` and `vue-cli` to develop. The project is based on the vue3 style background management system implemented by `ant-design-vue`,`typescript`,`vue3.0`,`vite`,`tsx`. ## GitHub [vue-vben-admin2.0](https://github.com/anncwb/vue-vben-admin) - `main` branch ## Preview [2.0 preview](https://vvbin.cn/next/) Account for test: vben/123456

Documentation

The documentation for 2.0 hasn't started yet, it will be provided later.

Preinstallation

Environmental requirements

• Node.js: - Version>12.0.0 is better.
• yarn > npm > cnpm: - Package management tool.

UI framework

• Tailwind CSS - 2.0.0-beta.5 has deleted.
• Ant Design Vue 2.0

Icon

• Ant Design Vue Icon Component - Icon which is imported on demand.
• Iconify - Icon can be used Icônes
• PurgeIcons - Icon which is used by build.

Plugin

• Vue Router Next
• Vuex Next
• vuex-module-decorators - vuex modular
• vite-plugin-mock - Mock plugin base on vite
• vue-i18n - Internationalization
• lodash-es - JavaScript utility library
• moment - Time operation library
• axios - Http data interaction
• TypeScript

Suggested development environment

• Git: - Tool of version management
• Visual Studio Code - (VSCode): Latest version
  • VS Code Extensions
  • Iconify IntelliSense
  • Tailwind CSS IntelliSense - Tailwind css style association
  • Vetur - Essential for vue development
  • ESLint - Checking script code
  • Prettier - Code formatting
  • Stylelint - Css formatting

Install

//  Make git case sensitive to file names
git config core.ignorecase false

// Pull code of the project
git clone https://github.com/anncwb/vue-vben-admin.git vue-vben-admin-2.0

cd vue-vben-admin-2.0

// 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

Usage

Development environment

yarn serve

Build

yarn build # build

yarn build:no-cache # build, cache will be removed before build

yarn report # Generate build package report preview

Format

yarn lint:stylelint # css formatting

yarn lint:prettier # js/ts code formatting

Other

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

Git submit specifications

• Refer to vue specifications (Angular)

  • 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

Code contribution

1. Fork code!
2. Create your own branch: git checkout -b feat/xxxx
3. Submit your changes: git commit -am 'feat(function): add xxxxx'
4. Push your branch: git push origin feat/xxxx
5. submitpull request

Finished features

• Project construction (based on vite）)
• Login and exit
• Menu (can search, drag and drop and menu layout)
• Multiple tabs/breadcrumbs
• Permission management base on role
• Permission management base on background
• The separation of routing and menu settings
• Collapsible sidebar
• Draggable sidebar
• Multi-tab mode/global control
• Menu search
• Page loading
• Scroll bar component
• Pop-up window expansion (dragable, full screen, adaptive height)
• Mock data
• hook Package
• Form component
• Right-click menu
• Watermark plugin
• Animation component
• QR code plugin
• Internationalization plugin
• Details component
• Validation component
• Tree component
• Picture preview component
• Table component
• Chart library
• Digital animation
• First screen loading waiting animation
• Extract the production environment profile

Developing features

• Upload component
• Rich text component
• Data import and export
• Global error handling
• Theme configuration
• Dark theme
• Build Gzip
• Build CDN
• System performance optimization

If you have more components/functions/suggestions/bugs/, welcome to submit pr or issue.