/handy-antd-admin

admin system based on Vue3 + Ant Design + vite

Primary LanguageVueMIT LicenseMIT

vue3-antd-system

该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统开发。基于vue3，使用vite脚手架，引用Ant组件库，方便开发快速简洁好看的组件。轻量级，适合扩展配置

  • 框架
    • 菜单目录（静态/动态路由）
    • tab标签
    • 登录（登录/退出）
  • 其他模块
    • echart图标
    • 系统管理（账号管理/角色管理/菜单管理/字典管理）

使用

// client端
npm install 
npm run dev

// server端
npm install
npm run start

总结

  1. vite版本的.vue页面中使用不了import path from 'path'，提示没有'default'，也不能用require；
    大概都是因为这些npm包都是module.export出来的，没有弄成umd规范
    Mockjs也是一样不能使用，它的使用有commonjs、AMD、CMD，唯独没有es module
    可以下载下来，使用tsc转成es module规范使用
// 想到的方法是，自己下载一份，改下
exports['default'] = Mockjs

  1. 使用不了js-cookie，可以用document.cookie读取

  2. 多级菜单只展开一个
    通过监听路由切换，有切换时判断当前路由，判断是否有children，有的话获取所有path，否则拿第一个path的值

  3. echart在dom加载完才渲染

mounted() {
    this.$nextTick(() => {
        drawLine();
    });
}
  1. echarts超出容器宽度问题的解决办法
onMounted(()=>{
    window.addEventListener('resize', ()=>{
        chart.resize()
    })
    // 手动触发resize
    setTimeout(()=>{
        dispatchEvent(new Event('resize'))
    })
})

或者在全局中触发resize

// main.ts
Vue.prototype.resize = function () {
  if (document.createEvent) {
    var event = document.createEvent('HTMLEvents')
    event.initEvent('resize', true, true)
    window.dispatchEvent(event)
  } else if (document.createEventObject) {
    window.fireEvent('onresize')
  }
}