Vue深入之js文件全局声明和基础组件的全局注册

前言：有些时候，部分基础的js和vue组件会在不同的页面进行使用，但是每次只是用很少一部分，甚至只用一次，最后导致每个页面里面都会有很长一串的js或者基础组件的长列表，尤其在基础组件很多的时候，会让你头痛万分。下面将介绍如何进行全局注册(都是基于vue-cli)

1.js文件全局注册

    例如：把一个名为store.js的文件放在和main.js的同级目录下进行操作,先引入，再注册

    

    其他页面是使用方法：this.$Store

    

2.vue基础组件全局注册

    例如：在components的文件下创建一个base文件夹存放需要全局注册的基本组件（baseInput.vue  baseSelect.vue）

    

    在main.js文件添加以下代码：

import upperFirst from 'lodash/upperFirst'          
import camelCase from 'lodash/camelCase'      //因为在组件名字处理的时候会用到lodash的部分，所以引入



const requireComponent = require.context(
  './components/base',   //当前基础组件相对与main.js的相对位置
  false,   //是否查询子目录
  /base[A-Z]\w+\.(vue|js)$/     //匹配基础组件的名字的正则，如果base里面的组件都是基础组件，那么只需要将所有包含即可，这里因为我的组件都是base开头的
)
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)   //获取组建配置
  const componentName = upperFirst(       //获取组件的 PascalCase 命名
    camelCase(
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')           // 剥去文件名开头的 `'./` 和结尾的扩展名
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    componentConfig.default || componentConfig
  )
})

在App.vue里试试

成功：