Vue Vben Aadmin 2.0

introduce

Vue – vben – admin – 2.0 is a new open source system, based on the ant – design – vue2. X, typescript4, vue3, vite vue3 style of background management system.

Project based on ant – design – vue, typescript, vue3.0, vite, tailwindcss, TSX vue3 style of background management system,

Making the address

Vue-vben-admin2.0-main branch

Vue-vben-admin – Thin compact – Main branch

Preview the address

2.0 Online Preview

Preview 2.0 Lite online

The document

Document preview

pre-installed

Environmental requirements

  • Node.js: – Version should be greater than12.0.0
  • yarn > npm > cnpm: – Package management tool.

UI framework

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

icon

  • Ant Design Vue Icon Component – Import required ICONS on demand.
  • Iconify – Use any icon set icon Icones
  • PurgeIcons – Pack only the ICONS used.

The plug-in

  • Vue Router Next
  • Vuex Next
  • Vuex-module-decorators-vuex modularity
  • Viet-plugin-mock – Mock plugins based on Vite.
  • Vue-i18n – Internationalization
  • Lodash-es – JavaScript utility library
  • Axios-http data interaction
  • TypeScript

Recommended development environment

  • Git: – Version management tool
  • Visual Studio Code– (VSCode): indicates the latest version
    • VS Code Extensions
      • Iconify IntelliSense
      • Vetur-vue development requirements
      • ESLint – Script code checking
      • Prettier – Code formatting
      • Stylelint-css formatting

The installation

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

// Pull the project code

git clone https:/ / github.com/anncwb/vue-vben-admin.git vue - vben - admin - 2.0

cd vue-vben-admin-2.0

// If you use another package management tool, you can install it yourself
// If yarn is not installed, run NPM install -g yarn
yarn install

Copy the code

use

The development environment

yarn serve
Copy the code

packaging


yarn build # packaged

yarn build:no-cache The cache will be removed before execution

yarn report Build package table preview
Copy the code

formatting

yarn lint:stylelint # Style formatting

yarn lint:prettier # js/ TS code formatting
Copy the code

other

yarn reinstall # Remove dependency reinstall, compatible with Windows

yarn preview Package preview locally

yarn log # generate CHANGELOG

yarn clean:cache # delete cache

yarn clean:lib # remove node_modules, compatible with Windows
Copy the code

Git submission specification

  • Refer to the VUE specification (Angular)

    • featAdd new features
    • fixFix problems/bugs
    • styleCode style dependence does not affect the results of the run
    • perfOptimization/performance improvement
    • refactorrefactoring
    • revertUndo modify
    • testRelevant test
    • docsDocumentation/comments
    • choreDependency updates/scaffold configuration modifications, etc
    • workflowWorkflow improvement
    • ciContinuous integration
    • typesType definition file changes
    • wipThe development of

Code contributions

  1. The 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

Completed function

  • Project construction (based on VITE)
  • Login and Logout
  • Menu (search and drag and drop as well as menu layout)
  • Multiple TAB pages/breadcrumbs
  • Role-based permission management
  • Background – based permission management
  • Separate routing and menu Settings
  • Collapsible sidebar
  • Drag sidebar
  • Multi-tab mode/global control
  • Menu search
  • Page loading
  • Scrollbar assembly
  • Popover extension (drag-and-drop, full screen, adaptive height)
  • Simulated data
  • Hook encapsulation
  • Form components
  • Right-click menu
  • Watermark plug-in
  • The animation component
  • Two-dimensional code plug-in
  • Internationalization plug-in
  • Details of the component
  • Verify components
  • The tree component
  • Image Preview component
  • Form components
  • The graph library
  • Digital animation
  • The first screen loads the waiting animation
  • Extract the production environment configuration file
  • Data Import and Export
  • Global error handling
  • Packaging Gzip
  • System performance optimization
  • Rich text component

Features under development

  • Upload component
  • The topic configuration
  • The dark theme

More components/features/suggestions/bugs/welcome to submit PR or issue