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

  以上代碼本人項目實測！！！真實可靠，請勿隨意轉載~轉載請注明出處~~~謝謝合作！