>[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)