使用Vue3
,Vite
,TypeScript
,Ant Design Vue
等主流技术开发的开箱即用的中后台前端项目,支持keepalive
功能,Vite
自动生成路由,pinia
状态管理,vxe-table
虚拟滚动表格,UnoCss
开发样式。
- 获取项目代码
git clone https://github.com/southliu/vue-admin.git
- 选择目录
cd vue-admin
- 安装全局依赖依赖,存在则不用安装
npm i -g pnpm
- 安装依赖
pnpm install
- 运行
pnpm dev
- 打包
pnpm build
- 参考 iconify官方地址
- VS Code安装Iconify IntelliSense - 图标内联显示和自动补全
git add .
git commit -m "feat: 新增功能"
git push
-
参考 vue 规范
feat
增加新功能fix
修复问题/BUGstyle
代码风格相关无影响运行结果的perf
优化/性能提升refactor
重构revert
撤销修改test
测试相关docs
文档/注释chore
依赖更新/脚手架配置修改等workflow
工作流改进ci
持续集成types
类型定义文件更改wip
开发中
-
如果无法运行commitlint,请运行以下指令:
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
- 主题换肤功能
- i18n语言切换
- 表单嵌套结构
- 包分析工具
- cli生成增删改查
- 剪切板功能
- 富文本组件
- 虚拟滚动组件
- 水印组件
- 密码强度显示
- 内容最大化功能
- 404错误页
- 封装文档说明
- 密码规则
- 弹窗拖拽功能
- 弹窗最大化功能
- Icon封装
- 标签页右键功能
- 搜索菜单功能
/**
* 需要通过路径转换成对应的name
* /system/user => SystemUser
* /content/article => ContentArticle
*/
defineOptions({
name: 'SystemUser'
});
- 功能扩展,在原有的api上拓展。
- 功能整合,合并两个或两个以上组件的api。
- 样式统一,避免后期样式变动,导致牵一发而动全身。
属性名 | 必填 | 属性说明 |
---|---|---|
name | 是 | 表单域字段,如果是嵌套格式,则为数组 |
label | 是 | 表单标签 |
rules | 否 | 表单规则,参考模板 |
component | 是 | 组件名,参考Antv名称,如Input |
componentProps | 否 | 组件属性,参考对应文档API,方法都是on开头,如dropdownVisibleChange要改为onDropdownVisibleChange |
属性名 | 必填 | 属性说明 |
---|---|---|
id | 否 | 唯一标识(被某些特定的功能所依赖) |
data | 是 | 表格数据 |
columns | 是 | 列数据 |
isLoading | 否 | 加载动画 |
offsetHeight | 否 | 高度偏移差,当表格高度过高出现滚动条的时候使用 |
isResize | 否 | 是否开启监听窗口变化而更改高度 |
属性名 | 必填 | 属性说明 |
---|---|---|
total | 否 | 数据总数 |
page | 是 | 当前页数 |
pageSize | 是 | 每页条数 |
isLoading | 否 | 加载动画 |
属性名 | 必填 | 属性说明 |
---|---|---|
value | 否 | 下拉框绑定值 |
componentProps | 否 | 下拉框值,ApiSelect属性,ApiTreeSelect属性 |
api | 是 | API接口 |
params | 否 | 接口参数 |
onDropdownVisibleChange | 否 | 展开下拉菜单的回调 |