一、layout组件

目前开源的后台管理系统layout组件一般分为：头部组件（navbar）、页签组件（tagsview）、左侧菜单（sidebar）、内容渲染区域（AppMain）

因涉及到的页面比较多，就不一一列出来，具体请查看源码

二、如何更改element-plus主体颜色，代码如下：

@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: (
'primary': (
'base': #355db4,
  ),
"success": (
"base": #67C23A,
  ),
  )
);
@import "element-plus/theme-chalk/src/index.scss"; // 如果想要引入所有的样式

三、全局自动注册基础组件

1、在各自组件中新增install.ts，代码如下：

import { App } from 'vue'
import Component from './index.vue'
export default {
  install(app: App) {
    app.component('TTable', Component)
  }
}

2、在components下的baseComponents文件夹，新建install.ts，代码如下

/*  统一注册 baseComponents 目录下的全部组件 */
import { App } from 'vue'
export default {
  install: (app: App) => {
    // 引入所有组件下的安装模块
    const modules:any = import.meta.globEager('./**/install.ts')
    for (const path in modules) {
      app.use(modules[path].default)
    }
  }
}

3、在main.ts中如下操作：

// 统一注册 baseComponents
import baseComponentsInstall from '@/components/baseComponents/install'
// 自动注册全部本地组件
app.use(baseComponentsInstall)

4、页面使用

四、缓存页面——给页面添加name属性

组件地址

gitHub组件地址

gitee码云组件地址

相关文章

基于ElementUi再次封装基础组件文档

---

vue3+ts基于Element-plus再次封装基础组件文档