vue项目实战：页面公共组件的全局注册动态引入的考虑

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

假如 commonComp 文件下面有好多个项目里需要用到的频繁使用的组件这时候可以考虑如下动态引入并且注册为全局 或者 局部组件

<!--
 * @Description:  commonComp/Comp.vue
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-08-19 09:23:45
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:27:56
-->
<!--  -->
<template>
<div class='content-box'>开头大大写组件</div>
</template>
<script>
export default {
components: {},
data() {
//这里存放数据
return {
};
},
created() {
},
mounted() {
},
methods: {
},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>

<!--
 * @Description:  commonComp/Comp1.vue
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-08-18 17:48:45
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-18 17:49:27
-->
<!--  -->
<template>
  <div class="content-box">组件一</div>
</template>
<script>
export default {
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>

<!--
 * @Description:  commonComp/Comp2.vue
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-08-18 17:48:56
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:28:07
-->
<!--  -->
<template>
<div class='content-box'>组件二</div>
</template>
<script>
export default {
components: {},
data() {
//这里存放数据
return {
};
},
created() {
},
mounted() {
},
methods: {
},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>

<!--
 * @Description: commonComp/Comp3.vue
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-08-18 17:49:06
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:29:30
-->
<!--  -->
<template>
<div class='content-box'>组件三</div>
</template>
<script>
export default {
components: {},
data() {
//这里存放数据
return {
};
},
created() {
},
mounted() {
},
methods: {
},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>

<!--
 * @Description:  commonComp/compComp.vue
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-08-19 09:23:21
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:28:16
-->
<!--  -->
<template>
<div class='content-box'>驼峰组件</div>
</template>
<script>
export default {
components: {},
data() {
//这里存放数据
return {
};
},
created() {
},
mounted() {
},
methods: {
},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>

/*
 * @Description: 动态注册组件  commonComp/commonComp.js  然后导入到main.js
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-08-18 17:58:06
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:31:54
 */
import Vue from 'vue'
// webpack的api，一个函数方法，匹配文件
const requireComponent = require.context( 
  '.', // 查看当前目录下的文件(查找需要文件的相对路径)
  false, // 不查看子文件
  /.vue$/ // 匹配方式正则表达式，只查看后缀为.vue的文件
)
// 循环获取到的文件，可在循环时处理文件名
requireComponent.keys().forEach((fileName) => {
  // 获取组件配置(组件模板)
  const componentConfig = requireComponent(fileName)
  // 将被注册的组件名字,对获取的组件文件名进行处理
  const componentName = fileName
    .replace(/^\.\/_/, '')
    .replace(/\.\w+$/, '')
    .split('./')
    .join('')
  // console.log(componentName, '测试组件获取测试')
  // 将组件在循环中注册到全局，
  Vue.component(componentName, // 依据文件名处理好的，将要被注册到全局的组件名
    componentConfig.default || componentConfig)
})
// const path = require('path')
// const files = require.context('@/components/home', false, /\.vue$/)
// const modules = {}
// files.keys().forEach(key => {
//   const name = path.basename(key, '.vue')
//   modules[name] = files(key).default || files(key)
// })
// components:modules

  以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！

以上是 vue项目实战：页面公共组件的全局注册动态引入的考虑 的全部内容， 来源链接： utcz.com/z/379827.html

回到顶部