Vue 以插件方式注册全局组件

组件

分别定义 3 个组件，放在 src/components 目录下

AComponents.js

<template>
    <h1>这是 A 组件.</h1>
</template>
<script>
export default {
    name: 'AComponents'
}
</script>

BComponents.js

<template>
    <h1>这是 B 组件.</h1>
</template>
<script>
export default {
    name: 'BComponents'
}
</script>

 CComponents.js

<template>
    <h1>这是 C 组件.</h1>
</template>
<script>
export default {
    name: 'CComponents'
}
</script>

 导出

文件名为 requireComponent.js，放是 src/js 目录下

CommonJS 方式

 还有一种写法，请移步《exports 和 module.exports （自用，小技巧）》

module.exports =  {
    install: function(Vue, opts) {
        debugger
        // 其组件目录的相对路径, 是否查询其子目录, 匹配基础组件文件名的正则表达式
        let requireComponent = require.context('../components', false, /\.vue$/);
        // 循环注册
        requireComponent.keys().forEach(fileName => {
            // 获取组件配置
            let componentConfig = requireComponent(fileName);
            // 获取组件对象： 如果这个组件选项是通过 `export default` 导出的，那么就会优先使用 `.default`，否则回退到使用模块的根。
            let component = componentConfig.default || componentConfig;
            // 全局注册组件：注意组件必须有 name，且与文件名相同
            Vue.component(component.name, component);            
        })
    }
}

ES6 方式

export default {
    install: function(Vue, opts) {
        debugger
        // 其组件目录的相对路径, 是否查询其子目录, 匹配基础组件文件名的正则表达式
        let requireComponent = require.context('../components', false, /\.vue$/);
        // 循环注册
        requireComponent.keys().forEach(fileName => {
            // 获取组件配置
            let componentConfig = requireComponent(fileName);
            // 获取组件对象： 如果这个组件选项是通过 `export default` 导出的，那么就会优先使用 `.default`，否则回退到使用模块的根。
            let component = componentConfig.default || componentConfig;
            // 全局注册组件：注意组件必须有 name，且与文件名相同
            Vue.component(component.name, component);            
        })
    }
}

导入

注意些在 main.js 文件中，下段话直接从Vue 教程中拷贝

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。这里有一个真实项目情景下的示例。

CommonJS 方式

const requierComponents = require("./js/requierComponents")

 main.js 中的完整写法： 

import Vue from 'vue'
import App from './App.vue'
import router from './router'

const requierComponents = require("./js/requierComponents")
Vue.use(requierComponents)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

ES6 方式

import requierComponents from './js/requierComponents'

 main.js 中的完整写法：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import requierComponents from './js/requierComponents'
// const requierComponents = require("./js/requierComponents")
Vue.use(requierComponents)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

使用

<template>
	<div class="index">
		<a-components></a-components>
		<b-components></b-components>
		<c-components></c-components>
		<d-components></d-components>
	</div>
</template>
<script>
export default {
	data() {
		return {
			
		}
	}
}
</script>

效果 

总结

1. 这里有两大知识点 Vue组件全局注册 和 Vue 插件开发，写成插件可用打包使用；

2. 两种导入导出方式：CommonJS 和 ES6；

3. 注意 export default 只能使用 import 导入；

4. module.exports 使用 import 和 require 导出都可；