vue組件註冊,省去import。

首先咱們在vue的使用中，免不了會本身自定義組件，那麼咱們每次定義好組件都會先import 進來，而後在components裏面引入才能用
復現如下場景

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}
<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>

咱們平時是否是都是這麼寫？我的以爲太麻煩了，秉持着能偷懶就偷懶的原則，咱就配置一次，不再用import引入就直接能用多好啊，好消息，好消息！是能夠實現的：

咱們須要藉助一下神器webpack，使用 require.context() 方法來建立本身的（模塊）上下文，從而實現自動動態require組件。這個方法須要3個參數：要搜索的文件夾目錄，是否還應該搜索它的子目錄，以及一個匹配文件的正則表達式。
咱們在components文件夾添加一個叫global.js的文件，在這個文件裏藉助webpack動態將須要的基礎組件通通打包進來。
固然了要根據不一樣的目錄結構進行不一樣的處理
若是你是這樣的目錄結構

那麼 global.js 就能夠這麼寫

import Vue from 'vue'

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
  '.', false, /\.vue$/
   //找到components文件夾下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    //由於獲得的filename格式是: './dataList.vue', 因此這裏咱們去掉頭和尾，只保留真正的文件名
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

若是你是以上的目錄結構，以上代碼就能夠知足你了

可是我不是這樣的目錄結構，我喜歡一個組件放在一個文件夾裏，並且js和scss都分開來寫，就像這樣：

這樣的話，就須要改動一下以上的代碼，廢話不都說，上代碼

import Vue from 'vue';

function capitalizeFirstLetter(string){
    return string.charAt(0).toUpperCase() + string.slice(1);
}
const requireComponent = require.context(
    '.',true,/\.vue$/
    //找到components文件夾下以.vue命名的文件
)
requireComponent.keys().forEach(fileName => {
    const componetConfig = requireComponent(fileName);
    let a = fileName.lastIndexOf('/');
    fileName = '.' + fileName.slice(a);
    const componetName = capitalizeFirstLetter(
        fileName.replace(/^\.\//,'').replace(/\.\w+$/,'')
    )
    Vue.component(componetName,componetConfig.default || componetConfig)
})

總之，global.js建好之後，最後咱們在main.js中import ‘./components/global.js’，而後咱們就能夠隨時隨地使用這些基礎組件，無需手動引入了。

而後咱們看下效果
首先我說好了，js並無任何import，也沒有components選項，直接在vue文件中使用組件

最後效果在這裏