vue3-antd-admin

基于 vue-cli / vite2.x + vue3.x + antd-design-vue2.x + typescript4.x 的后台管理系统模板

• 账号：admin，密码：123456
• 在线预览
• API 文档
• 后台地址
• vue-cli 版
• vite 踩坑版
• gitee 地址

vscode 配置

安装项目根目录.vscode 推荐的插件，再安装 Volar，并禁用 Vetur，重启 vscode 即可。

使用了 Vue3.0 全家桶、ant-design-vue2.0 和 typescript4.0，实践 vue3.0 的新特性以及玩法，不得不说 vue3.0 的 Composition API 相比于 vue2.0 的 Options API 灵活很多，让我们可以灵活地组合组件逻辑，我们可以很轻松的使用 hooks 的形式去代替以前 mixins 等的写法。更多 hooks 可以参考vueuse

功能、组件的封装

• 动态表格（扩展了伸缩列功能，以及使用 JSON schema 配置生成表格） // TODO 后续有待加强及完善
• 动态表单（满足基本的需求） // TODO 后续有待加强及完善
• 自定义弹窗（支持 8 个方向拖拽改变大小以及拖拽移动位置）// TODO: 继承 antd 原组件所有 props
• 图片视频预览（目前只是简单显示）
• 分割组件（目前只做了左右）
• 图标组件封装(本地 svg 封装、阿里图标的在线和离线封装)
• 其他...

页面功能

系统看板

• 首页
• 疫情地图
• 系统日志
• 前端性能监控

系统管理

• 账号管理
• 角色管理
• 资源管理
• 字典管理

克隆项目

git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
or
git clone --depth=1 https://github.com/buqiyuan/vite-vue3-lowcode.git

Project setup

yarn install
# 或
yarn --frozen-lockfile

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

感谢 JetBrains 免费的开源授权