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