vue 组件全局封装_Vue封装的组件全局注册并引用

当vue接触的多了之后，你可能也会到自己封装组件的程度，试想每个页面的功能级模块全部拆分成组件，然后后续请求后台数据传入进去或者自己模拟数据，是多么方便的一件事情。

每当我们需要修改的时候，只需维护那一个功能性组件即可，不需要这个功能了，只需要从页面中删除这个组件的引用即可。

那么废话不多说了，我们来看看如何全局注册并一键引入(类似于element ui的全部引入)。

如何封装组件就不多赘述了。

参考vue官网的做法：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/GlobalCompo