中文 | 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
The document has not been completely written, it is still being written...
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
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
- vue2.6.11(Vue3 version will be provided later)
- composition-api
- [email protected]
- vuex-module-decorators
- [email protected]
- [email protected]
- [email protected]
- mockjs
- vue-i18n
- moment
- lodash
- Technology used
- Environmental requirements
- Browser support
- install
- Terminal
- Git Submit specifications
- CodeContribution
- DevelopmentPlan
- joinUs
Node.js
: >= v10yarn
: latest
Git
: Code managementVisual Studio Code
(VSCode): IDE
VSCode Plugin
Vetur
: vue Development essentialGitLens
: Git visualization toolESLint
: Script code inspectionstylelint
: Style code checkPrettier - Code formatter
:Code formatting
Support modern browsers and IE10+
![]() IE / Edge |
![]() Firefox |
![]() Chrome |
![]() Safari |
---|---|---|---|
IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
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
yarn serve
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
yarn test:unit # --watch : Track file changes
yarn lint:stylelint # Style formatting
yarn lint:prettier # js/ts code formatting
yarn reinstall # Remove dependencies and reinstall, compatible with window
yarn preview # Package preview locally
yarn log # Generate CHANGELOG
-
reference vue specification (Angular)
feat
Add new featuresfix
Fix the problem/BUGstyle
The code style does not affect the running resultperf
Optimization/performance improvementrefactor
Refactorrevert
Undo edittest
Test relateddocs
Documentation/noteschore
Dependent update/scaffolding configuration modification etc.workflow
Workflow improvementsci
Continuous integrationmod
Uncertain classification modificationwip
Delete Files
- Fork code!
- Create your own branch:
git checkout -b feat/xxxx
- Submit your changes:
git commit -am 'feat(function): add xxxxx'
- Push your branch:
git push origin feat/xxxx
- submit
pull request
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
- Error Log
- Drag panel
- Verification code/Verification component
- Tree component
- Editable table
- Data import and export
- 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
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