有一些常用的组件或者js库，可能大部分页面都要使用，频繁的import未免显得啰嗦，这时可以考虑通过全局引入的方式实现
先看比较简单的js库全局引入
js库全局引入
js库的引入很简单，通过Vue.prototype即可
main.js 全局js引入核心代码
main.js 全局js引入核心代码
import Vue from 'vue'
import api from './utils/config/api' //要引入的js文件
Vue.prototype.$api=api
.... //其他代码
.vue组件中使用：通过this.$api即可
全局组件注册
可以分为这两种，引用单个组件、引用某个文件夹下全部组件
单个组件全局注册
import TableBox from './components/mod/TableBox
Vue.component(' TableBox',TableBox) //第一个为全局注册的组件名称，第二个为全局注册的组件模版
多个组件全局注册
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
'./components/mod/' , // 组件所在目录
false , // 是否不引用子目录组件
/_base-[\w-]+\.vue$/ //通过正则表达式指明引入的文件名类型，比如以 _base- 开头的vue组件
)
// For each matching file name...
requireComponent.keys().forEach(fileName => {
// Get the component config
const componentConfig = requireComponent(fileName)
// Get the PascalCase version of the component name
const componentName = upperFirst(
camelCase(
fileName
// Remove the "./_" from the beginning
.replace(/^\.\/_/, '' )
// Remove the file extension from the end
.replace(/\.\w+$/, '' )
)
)
// Globally register the component
Vue.component(componentName, componentConfig. default || componentConfig)
})
记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
注意：太多的全局组件注册，会导致进入首页的文件量变大，所以尽量考虑将哪些最常用的且文件较小的组件进行全局引入，其他组件还是在需要的页面再引入
