VUE VBEN ADMIN2.0

Chinese | English

CHANGELOG

• Introduction
• GitHub
• Preview
• Documentation
• Preinstallation
  • [Environmental requirements](#Environmental requirements)
  • [UI framework](#ui framework)
  • Icon
  • Plugin
  • [Suggested development environment](#Suggested development environment)
• Install
• Usage
  • [Development environment](#Development environment)
  • Build
  • Format
  • 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 - main branch

Preview

2.0 preview

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.