这篇文章将为大家详细讲解有关Vue中怎么全局注册组件并引用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联建站服务项目包括洱源网站建设、洱源网站制作、洱源网页制作以及洱源网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，洱源网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到洱源省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！1、正则判断路径以及文件名，获取全部组件并全局注册（可以直接在main.js里写，但是为了规范以及后期可维护性，我们新建个单独的的js文件写入）
（1）main.js引入所有自定义封装的组件
import Vue from 'vue';
import echarts from 'echarts';
import App from './App.vue';
import router from './router';
import store from './store';
import './plugins/element';
// 引入时间戳序列化
import './plugins/dateFormat';
// 引入公共样式
import Public from './assets/css/public.css';
// 引入所有自定义封装的组件
import './components/CommonCommponts/GlobalComponents';
import startup from './startup';
// 使用公共样式
Vue.use(Public);
Vue.config.productionTip = false;
Vue.prototype.$echarts = echarts;
function vue() {
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
}
startup(vue, router);（2）全局组件的GlobalComponents.js
这里需要安装2个插件upperFirst和camelCase
下面是组件相对于这个文件的路径，因为我的封装组件和这个js文件在同一级，所以直接 . 就可以了。
然后是是否查询子目录，即这个路径下你又新建了文件夹，把各个组件区分开，那么就会嵌套很多层，查询子目录可以方便的使我们找到它们。
然后是正则表达式，因为我的所有组件名都是Rdapp开头的，这里看大家的文件命名，不需要的话删除前面的Rdapp即可。
然后下面的部分就可以不用动了。
import Vue from 'vue';
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';
const requireComponent = require.context(
// 其组件目录的相对路径
'.',
// 是否查询其子目录
true,
// 匹配基础组件文件名的正则表达式
/Rdapp[A-Z]\w+\.(vue|js)$/,
);
requireComponent.keys().forEach((fileName) => {
// 获取组件配置
const componentConfig = requireComponent(fileName);
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 获取和目录深度无关的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, ''),
),
);
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的，
// 那么就会优先使用 `.default`，
// 否则回退到使用模块的根。
componentConfig.default || componentConfig,
);
});2、组件封装以及命名
这里新建了一个文件夹，其中js文件是上面的配置文件，用于全局注册并引用的，然后下面是封装的组件，请使用驼峰命名法。
3、组件引入
组件引入使用 - 语法，以每个驼峰为标记，例如AccBdd的命名，引入就是
