该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统开发。基于vue3,使用vite脚手架,引用Ant组件库,方便开发快速简洁好看的组件。轻量级,适合扩展配置
- 框架
- 菜单目录(静态/动态路由)
- tab标签
- 登录(登录/退出)
- 其他模块
- echart图标
- 系统管理(账号管理/角色管理/菜单管理/字典管理)
// client端
npm install
npm run dev
// server端
npm install
npm run start
- vite版本的.vue页面中使用不了import path from 'path',提示没有'default',也不能用require;
大概都是因为这些npm包都是module.export出来的,没有弄成umd规范
Mockjs也是一样不能使用,它的使用有commonjs、AMD、CMD,唯独没有es module
可以下载下来,使用tsc转成es module规范使用
// 想到的方法是,自己下载一份,改下
exports['default'] = Mockjs
-
使用不了
js-cookie
,可以用document.cookie读取 -
多级菜单只展开一个
通过监听路由切换,有切换时判断当前路由,判断是否有children,有的话获取所有path,否则拿第一个path的值 -
echart在dom加载完才渲染
mounted() {
this.$nextTick(() => {
drawLine();
});
}
- 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')
}
}