component — 基础组件全局注册
最后更新于：2022-04-02 08:07:43
>[success] # 文档中的好案例
[基础组件全局注册](https://cn.vuejs.org/v2/guide/components-registration.html)
>[info] ## 注册全局组价
~~~
1.使用的情况，有时候我们会把相对通用的封装成基础组件，在各个组件频繁使用，这时候一般
我们解决方法就是用到的地方在当前页导入，或者是在main.js 入口写所有需要全局使用的组件
每一个import 导入
2.这里要说的现在工作用到的真实场景，我们项目会通过动态去配置一些表单，和一些页面，
这些动态配置的组件都是基于ele组件更改，或者是高于单一组件让其具备联动逻辑，大概
这类基础组件就有20+，因此我们不能每次都做到增加新的组价就去main.js 添加，总有遗忘
的时候这时候就是'动态注册组件'最好的应用场景
~~~
* 不用动态组成，自己注册形成的噩梦文件
>[danger] ##### require.context
[文章首发地址来源](https://blog.wbjiang.cn/article/169)
[一篇文章读懂](https://segmentfault.com/a/1190000019723837)
[官网对api的解释](https://webpack.js.org/guides/dependency-management/#requirecontext)
* 文章中的图片说明
>[danger] ##### 来编写一个动态注册的脚本
~~~
const requireContext = require.context("./components/", false, /\.vue$/);
const components = requireContext.keys().reduce((acc, key) => {
const component = requireContext(key).default;
acc[component.name] = component;
return acc;
}, {});
// 直接在根目录注册 也就是一般大家定义的App.vue 文件
export default {
name: "app",
components,
};
~~~
>[danger] ##### 利用vue.component 来注册
~~~
1.首先vue.component 本身就可以注册全局组件，想vue 官网给出这种方案
~~~
~~~
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其组件目录的相对路径
'./components',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/Base[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
)
})
~~~
>[danger] ##### 当然你想让自动引入更健硕
[可以使用vue文档中给的案例](https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js)
';