通用vue项目应对定制化时该如何组件化

分析页面-页面组件化

 之前写了一个项目，大屏页面是通用页面但是遇到个别用户想要定制化，但是主页如果去做判断显得太过臃肿，后续也无法判断，由于公司不想维护多套代码，于是就考虑抽离成组件！直接看代码！

 之前只有一个页面为'zhsy',考虑到别的地方有跳转到'zhsy'，由于不能影响别的页面的跳转逻辑，所以这边考虑到把'zhsy'里面的代码抽离成组件，然后通过引入组件然后组测组件，最后通过后端返回的定制化的名字来控制页面显示

<template>
  <component :is="dom[curSy]" />
</template>
<script setup>
import tyZhsy from './tyzhsy.vue'
import mcZhsy from './otherZhsy/mcZhsy.vue'
const curSy = ref('tyZhsy');
const store = useStore();
let name = store.getters.diffSystem.name
const dom = shallowReactive({
  tyZhsy, mcZhsy
})

const changeName = () => {
  curSy.value = name + 'Zhsy'
}
changeName()
</script>
<style scoped lang="scss"></style>

2.vite项目中如果想要更灵活，可以考虑动态引入组测组件来实现这个功能,先通过import.meta.glob("./*.vue")，引入所有文件然后再遍历文件后注册组件，成为全局组件，具体是否为全局组件看个人需求使用，这样全局上就有所有的定制化组件，再通过后端返回的组件名，动态渲染

const modules = import.meta.glob("./*.vue");
const lsbjcomponents = {
  install: function (app) {
    for (let path in modules) {
      modules[path]().then((mod) => {
        const fileName = path?.split("/").pop().replace(".vue", "");
        app.component(fileName, mod["default"]);
      });
    }
  },
};