README.EN.md

December 22, 2024 · View on GitHub

vue-xs-admin

English | 中文

Brief Introduction

The out of the box background template developed based on mainstream technologies such as Vue3、Vite3、Element Plus, built-in I18n translation, routing permission control and other solutions can meet the needs of most enterprise management systems!

Preview address

Account: admin
Password: admin123

Document

Simple version

mini-xs-admin

Electron Edition

electron-xs-admin

Tauri Edition

tauri-xs-admin

Characteristic

The latest technology stack: developed using front-end cutting-edge technologies such as Vue3/Vite3
Theme: configurable theme
Internationalization: built-in perfect internationalization scheme
Common components: complete built-in package of common components
PWA: built-in PWA

Prepare

Node And Git - Project development environment
Vite - Familiar with Vite features
Vue3 - familiar with Vue basic syntax
Es6+ - familiar with the basic syntax of Es6
Vue-Router-Next - Familiar with the basic use of Vue Router
Element-Plus - Ui Basic Usage

Installation and use

1. Get project code (Https or SSH)

git clone https://github.com/jsxiaosi/vue-xs-admin.git

git clone git@github.com:jsxiaosi/vue-xs-admin.git

Alternatively, you can use the xs-clito quickly create one

npx @jsxiaosi/xs-cli create [project-name]

2.Installation Dependencies

cd vue-xs-admin

Recommendedpnpm

pnpm i

npm install

npm install

3.Developer

npm run dev

4.Production

npm run build

Project address

vue-xs-admin

How to contribute

Pull Request:

Fork Code!
Create your own branch: git checkout -b feature/xxxx
Submit your changes: git commit -m 'feature: add xxxxx'
Push your branch: git push origin feature/xxxx
Submit: pull request

Git Contribution submission specification

Refer to Vue specification
- feat New Features
- fix Repair defects
- docs Document change
- style Code format
- refactor Code refactoring
- perf Performance optimization
- test Add neglected tests or changes to existing tests
- build Build processes, external dependency changes (such as upgrading npm packages, modifying packaging configurations, etc.)
- ci Modify CI configuration and scripts
- revert Roll back the commit
- chore Changes to the build process or tools and libraries (do not affect source files)
- wip Under development
- types Type definition file modification

Browser Support

Chrome 80+ is recommended for local development

Supports modern browsers, not Internet Explorer

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

vite-plugin-compression - Resource compression supports gzip or brotli
vite-plugin-style-import - Dynamically introduce component library styles
vite-plugin-svg-icons - SVG Sprite figure
vite-plugin-theme-preprocessor - Change the theme style dynamically
vite-plugin-pwa - PWA

EsLint - js Grammar testing
StyleLint - Style syntax checking
CommitLint - git commit Commits a canonical detection

Project directory Structure

.
├── build                         #Global public configuration directory
├── public                        #Public static file directory
├── src                           #Project Code Directory
│   ├── App.vue                   #The vue module
│   ├── assets                    #Project static file directory
│   ├── components                #Common components
│   ├── layouts                   #Layout of the directory
│   ├── locales                   #Internationalization Configuration
│   ├── main.js                   #Entrance to the file
│   ├── router                    #Router
│   ├── store                     #Pinia
│   ├── styles                    #Common style
│   ├── utils                     #Public methods
│   └── views                     #Directory for storing vue pages
├── LICENSE
├── README.md
├── .editorconfig                 #The specification compiler encodes style files
├── .env.development              #Development environment variables
├── .env.production               #Production environment variables
├── .env.staging                  #Test environment variables
├── .eslintrc.js                  #EsLint configuration files
├── .eslintrcignore               #EsLint Ignoring configuration files
├── stylelint.config.js           #StyleLint configuration files
├── .stylelintignore              #StyleLint Ignoring configuration files
├── commitlint.config.js          #CommitLint configuration files
├── prettier.config.js            #Prettier configuration files
├── .prettierignore               #Prettier Ignoring configuration files
├── index.html                    #The root template
├── jsconfig.json
├── package-lock.json
├── package.json
└── vite.config.js                #vite configuration files

Thanks to the following author projects for help

maintainers

@jsxiaosi