Awesome

<div align="center"> <a href="https://github.com/jsxiaosi/vue-xs-admin"> <h1>vue-xs-admin</h1> </a> </div>

中文 | English

简介

基于Vue3,Vite3,Element-Plus等主流技术开发的开箱即用后台模板，内置 I18n 翻译、路由权限控制等方案能够满足多数企业管理系统需求！

预览地址

账号：admin
密码：admin123

文档

简易版

mini-xs-admin

Electron 版

electron-xs-admin

Tauri 版

tauri-xs-admin

特性

最新技术栈：使用 Vue3/Vite3 等前端前沿技术开发
主题：可配置的主题
国际化：内置完善的国际化方案
常用组件：内置完善的常用组件封装
PWA：内置 PWA

准备

Node 和 Git -项目开发环境
Vite - 熟悉 Vite 特性
Vue3 - 熟悉 Vue 基础语法
Es6+ - 熟悉 Es6 基本语法
Vue-Router-Next - 熟悉 Vue-Router 基本使用
Element-Plus - Ui 基本使用

安装使用

1. 获取项目代码（Https or SSH）

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

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

或者通过xs-cli快速创建

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

2.安装依赖

cd vue-xs-admin

推荐使用pnpm

pnpm i

npm安装

npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
# 如果下载依赖慢可以使用淘宝镜像源安装依赖
npm install --registry=https://registry.npm.taobao.org

3.运行

npm run dev

4.打包

npm run build

项目地址

vue-xs-admin

如何贡献

Pull Request:

Fork 代码!
创建自己的分支: git checkout -b feature/xxxx
提交你的修改: git commit -m 'feature: add xxxxx'
推送您的分支: git push origin feature/xxxx
提交pull request

Git 贡献提交规范

参考 vue 规范
- feat 新增功能
- fix 修复缺陷
- docs 文档变更
- style 代码格式
- refactor 代码重构
- perf 性能优化
- test 添加疏漏测试或已有测试改动
- build 构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)
- ci 修改 CI 配置、脚本
- revert 回滚 commit
- chore 对构建过程或辅助工具和库的更改 (不影响源文件)
- wip 正在开发中
- types 类型定义文件修改

浏览器支持

本地开发推荐使用Chrome 80+ 浏览器

支持现代浏览器, 不支持 IE

<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" /></br>IE	<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" /></br>Edge	<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /></br>Firefox	<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /></br>Chrome	<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /></br>Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

项目中使用的相关仓库

Vite 相关

vite-plugin-compression - 资源压缩支持 Gzip or brotli
vite-plugin-style-import - 动态引入组件库样式
vite-plugin-svg-icons - SVG 雪碧图
vite-plugin-theme-preprocessor - 动态改变主题样式
vite-plugin-pwa - PWA

规范相关

EsLint - js 语法检测
StyleLint - 样式语法检测
CommitLint - git commit 提交规范检测

项目目录结构

.
├── build                         #全局公共配置目录
├── public                        #公共静态文件目录
├── src                           #项目代码目录
│   ├── App.vue                   #主vue模块
│   ├── assets                    #项目静态文件目录
│   ├── components                #公共组件
│   ├── config                    #项目配置
│   ├── enum                      #枚举
│   ├── layouts                   #布局目录
│   ├── locales                   #国际化配置
│   ├── instruct                  #指令
│   ├── main.js                   #入口文件
│   ├── router                    #路由
│   ├── server                    #请求存放目录
│   ├── store                     #vuex
│   ├── styles                    #公共样式
│   ├── utils                     #公共方法
│   └── views                     #存放vue页面目录
├── LICENSE
├── README.md
├── .editorconfig                 #规范编译器编码样式文件
├── .env.development              #开发环境变量
├── .env.production               #生产环境变量
├── .env.staging                  #测试环境变量
├── .eslintrc.js                  #esLint配置文件
├── .eslintrcignore               #esLint忽略配置文件
├── stylelint.config.js           #styleLint配置文件
├── .stylelintignore              #styleLint忽略配置文件
├── commitlint.config.js          #commitLint配置文件
├── prettier.config.js            #prettier配置文件
├── .prettierignore               #prettier忽略配置文件
├── index.html                    #根模板
├── jsconfig.json
├── package-lock.json
├── package.json
└── vite.config.js                #vite配置文件

感谢以下作者项目提供帮助

维护者

@jsxiaosi