Vue 3 + TypeScript + Vite 管理后台框架

基于vue3+TypeScript + Vite的后台项目初始框架，element-plus + ant design两个版本

示例

https://337547038.github.io/vite-frame/

封装组件

ak-list组件

el-table二次封装，实现功能：

✔1.集成条件搜索
✔2.集成分页功能
✔3.集成列表数据接口请求功能
✔4.时间单元格快速格式化
✔5.可快速显示tag样式
✔6.集成数据值字典转换
✔7.无需重复复制组件el-table-column
✔8.集成横向滚动条固定在浏览器底部
✔9.快速设置表头帮助信息

使用：

<ak-list :columns="columns"></ak-list>

更多参数点这里

ak-form组件

实现功能：

✔1.实现联动隐藏显示或禁用启用；
✔2.实现接口数据初始填充；
✔3.实现数据提交；
✔4.实现常见类型快速校验；
✔5.实现radio等类选项数据动态获取/字典匹配；
✔6.实现动态联动请求；
✔7.实现div布局；
✔8.实现弹性布局；
✔9.实现input插槽；

使用：

<ak-form :data="data"></ak-form>

更多参数点这里

说明

本系统使用vite-plugin-pages插件自动生成路由

若需使用tagViews功能，则需在页面中导出组件名称（keep-alive需要使用组件名称），可使用添加script方法导出或使用相关插件(vite-plugin-vue-setup-extend、unplugin-vue-define-options)，同时需将当前路由name设置为组件名称，保持一致

方法一：添加script标签

<script lang="tsx">
  export default {
  name: 'XXXXX' // 注意路由name是不能重复的
}
</script>

方法二：使用自编写插件./src/utils/vitePlugins 直接在script标签添加name值

<script setup lang="ts" name="name">
  
</script>

vite-plugin-pages 可使用如下方法设置当前路由组件名或设置为不需要缓存，route和script同级

<route>
  {
  name:'XXXXX',
  meta:{
  keepAlive:false // 为false时不缓存
  }
  }
</route>