/v3-ts

v3&ts

Primary LanguageTypeScriptMIT LicenseMIT

vue3-antd-admin

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

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 免费的开源授权