VUE VBEN ADMIN

中文 | English

A basic framework suitable for the development of medium and large projects requires a certain understanding of vue, typescript, and can also be used as an example of understanding the new wording, and adapt to the development method of subsequent new versions in advance

The project is based on the vue3 style background management system implemented by ant-design-vue, typescript, vue-composition-api, TSX

Compatible with vue2 browsers, everything is free and does not charge any fees, please rest assured to use. Subsequent regular updates and maintenance are provided for reference and learning

Preview

Live Demo

### gitHub

vue-vben-admin

Document

Due to the relatively short writing time, the document is still under development for the time being, and will be added one after another...

Why write this

At present, there is no relevant background system written using composition-api and typescript on the Internet, so I will share what I wrote. New features will be added in the future, and when vue3 is completely stable, A version of vue3 will be provided. The cost of switching to vue3 after this project is relatively low, and the subsequent one-click version switching will be made

Why use composition-api

The biggest reason is that we still need to be compatible with ie11, ie9 and ie10. We may need to modify the compatibility of css and some plug-ins by ourselves. When vue3 is stable, it will support ie11 at most, so we will use it temporarily vue-composition-api for development

Technology used

• vue2.6.11(Vue3 version will be provided later)
• composition-api
• vuex@3.4.0
• vuex-module-decorators
• vue-router@3.3.4
• axios@0.19.2
• ant-design-vue@1.6.3
• mockjs
• vue-i18n
• moment
• lodash

CHANGELOG

• Technology used
• Environmental requirements
  • Suggested development environment
• Browser support
• install
• Terminal
  • Start the development environment
  • Build
  • unit test
  • format
  • Other
• Git Submit specifications
• CodeContribution
• DevelopmentPlan
• joinUs

Environmental requirements

• Node.js: >= v10
• yarn: latest

Suggested development environment

• Git: Code management
• Visual Studio Code (VSCode): IDE

VSCode Plugin

• Vetur: vue Development essential
• GitLens: Git visualization tool
• ESLint: Script code inspection
• stylelint: Style code check
• Prettier - Code formatter:Code formatting

Browser support

Support modern browsers and IE10+

IE / Edge	Firefox	Chrome	Safari
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions

install

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

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

cd vue-vben-admin

//  It is best to use yarn/npm, otherwise hot update may cause problems
yarn install

Terminal

Start the development environment

yarn serve

Build

At the same time, the file name window-glob.js configuration file will be generated, and the project configuration can dynamically modify the file and update the code variables in real time, such as the interface address

yarn build # Packaging will use hardSource for packaging

yarn build:no-cache # Packaging will not use hardSource for packaging

yarn report # Generate build package table preview

unit test

yarn test:unit # --watch : Track file changes

format

yarn lint:stylelint # Style formatting

yarn lint:prettier # js/ts code formatting

Other

yarn reinstall # Remove dependencies and reinstall, compatible with window

yarn preview # Package preview locally

yarn log # Generate CHANGELOG

Git Submit specifications

• reference vue specification (Angular)

  • feat Add new features
  • fix Fix the problem/BUG
  • style The code style does not 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
  • mod Uncertain classification modification
  • wip Delete Files

CodeContribution

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. submit pull request

DevelopmentPlan

Due to the short development time, the functions are temporarily less

The follow-up will be gradually improved, and what components are needed can be proposed

• Project construction (based on vue-cli4) has been optimized
• First screen loading waiting animation
• Login and logout
• Menu (can search and drag and drop and menu layout)
• Multiple tabs/breadcrumbs
• Role-based permission management
• Authority management based on background
• Separate routing and menu settings
• Collapsible sidebar
• Draggable sidebar
• Multi-tab mode/global control
• Support menu svg icon
• Menu search
• Page loading/page timeout component
• Scroll bar component
• Lazy loading components
• Pop-up window expansion (dragable, full screen, adaptive height)
• Full screen
• Auto-register SVG icon
• Mock data
• Clipboard package
• hooks package
• Chart library
• Digital animation
• Project configurable
• Theme configuration
• Form component
• Right-click menu
• Watermark plugin
• Parallax component
• Animation component
• QR code plugin
• Internationalization plugin
• Picture preview component
• Details component
• Table component
• Image crop
• Rich text component
• Upload components
• Tree component
• Editable table
• Data import and export
• Verification code/Verification component
• Drag panel
• Dark theme
• System is further optimized
• Compatible with the latest vuex, vue-router
• Build vite version
• More components/functions/suggestions/bugs/welcome to submit pr or issue

joinUs

VUE-VBEN-ADMIN is a completely open source and free project. It aims to help developers more easily develop medium and large management systems. It also provides QQ exchange groups (because the project has just started a few days ago, there are not many people in the group, so interested You can join the group to discuss together), use questions welcome to ask questions in the group.

• QQ group 569291866