网站建设 淘宝客末班,旅游网站建设与规划,网站程序系统,微商网站如何做推广背景#xff1a;qiankun微前端架构实现多应用集成 主应用框架#xff1a;vue2 element-ui 子应用框架#xff1a;vue3 element-plus 问题现象和分析
登录页面是主应用的#xff0c;在登录之后才能打开子应用的菜单页面#xff0c;即加载子应用。 首… 背景qiankun微前端架构实现多应用集成 主应用框架vue2 element-ui 子应用框架vue3 element-plus 问题现象和分析
登录页面是主应用的在登录之后才能打开子应用的菜单页面即加载子应用。 首次进入登录页面样式是没有问题的但是打开过子应用页面之后再回到主应用的登录页面时登录页面的下拉框和输入框的边框不见了。
1、F12观察 el-input 的结构和样式 element-ui 给 .el-input_inner设置了 border但是 element-plus 去掉了 border 2、再观察一下 element-plus 的 el-input比 element-ui 多了一层 el-input__wrapperelement-plus 是给 el-input__wrapper设置了 box-shadow来作为边框的 解决方法
element-plus 提供了自定义命名空间参考官网将使用 element-plus 的应用使用自定义命名空间与 element-ui 固定的 el-前缀区分开。 代码参考 App.vue
templateel-config-provider namespaceep!-- ... --/el-config-provider
/template/src/styles/element_plus_index.scss
forward element-plus/theme-chalk/src/mixins/config.scss with ($namespace: ep
);vite.config.js使用vite搭建项目
import { defineConfig } from vite
export default defineConfig({// ...css: {preprocessorOptions: {scss: {additionalData: use /styles/element_plus_index.scss as *;,/* additionalData: use /styles/element_plus_index.scss as *;use /styles/xxx.scss as *;use /styles/yyy.scss as *; */ // 如果有多个文件需要引入},},},// ...
})vue.config.js使用 vue-cli搭建项目
module.exports {css: {loaderOptions: {sass: {additionalData: use /styles/element_plus_index.scss as *;},},}
}最后把开发过程中自定义的一些 element组件样式中的 el-前缀都替换成ep- 效果
如下图为子应用页面可见子应用 element-plus 的 标签类名和样式文件都改为 ep-前缀不会再影响主应用 框架版本记录
有些应用使用了较早版本的 element-plus而较早版本的 element-plus功能当时还不是很稳定自定义命名空间可能无法使用记录一下我当前正在使用的框架版本
应用框架版本1 # vue-cli 5.0.8vue: ^3.0.0element-plus: 2.3.8应用框架版本2 # vite 5.3.1vue: ^3.4.29element-plus: ^2.8.0
