Vue3

简介

基于vue3,vite2,element-push等主流技术开发的后台框架模板
预览地址：https://www.supercutexiaosi.top/
账号：admin
密码：admin123

特性

• 最新技术栈：使用 Vue3/vite2 等前端前沿技术开发
• 主题：可配置的主题
• 国际化：内置完善的国际化方案

准备

• node 和 git -项目开发环境
• Vite - 熟悉 vite 特性
• Vue3 - 熟悉 Vue 基础语法
• Es6+ - 熟悉 es6 基本语法
• Vue-Router-Next - 熟悉 vue-router 基本使用
• VueX v4.x - 熟悉 vue-router 基本使用
• element-push - ui 基本使用

安装使用

• 获取项目代码（https or ssh）

git clone https://github.com/SuperCuteXiaoSi/xiaosiAdmin.git

git clone [email protected]:SuperCuteXiaoSi/xiaosiAdmin.git

• 安装依赖

cd vite-vue3-Template

npm install

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

• 运行

npm run dev

• 打包

npm run build

项目地址

• vite-vue3-template

如何贡献

Pull Request:

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

Git 贡献提交规范

• 参考 vue 规范

  • feature 增加新功能
  • fixbug 修复问题/BUG
  • style 不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)
  • perf 优化/性能提升
  • refactor 重构
  • revert 撤销修改
  • docs 文档/注释
  • chore 依赖更新/脚手架配置修改等

浏览器支持

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

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

IE	Edge	Firefox	Chrome	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 - 动态改变主题样式

规范相关

• esLint - js 语法检测
• styleLint - 样式语法检测
• commitLint - git commit 提交规范检测

项目目录结构

.
├── build                         #全局公共配置目录
├── public                        #公共静态文件目录
├── src                           #项目代码目录
│   ├── App.vue                   #主vue模块
│   ├── assets                    #项目静态文件目录
│   ├── components                #公共组件
│   ├── layouts                   #布局目录
│   ├── locales                   #国际化配置
│   ├── main.js                   #入口文件
│   ├── router                    #路由
│   ├── 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配置文件

维护者

@SuperCuteXiaoSi

License

MIT © 2021