在nuxt中自动挂载vue全局基础组件

废话不多说:专门处理细碎的基础组件
vue全局组件注册就是从官网搬来的, 点这里直飞vue官网

  1. 在components/ 下新建global-components.js文件
    文件内容:
// 引入vue 及 lodash
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'  // 首字线大写
import camelCase from 'lodash/camelCase'  // 驼峰命名大法

// 把 /component/base/ 下的所有 vue 组件 require 进来
// path: 要引入的组件所在相对路径(相对于当前文件)
// deep: 是否检索子文件夹
// matchFile: 匹配的文件名称
// require.context(path, deep, matchFile)
const requireComponent = require.context('../components/base/', false, /_base-[\w-]+\.vue$/)
// 遍历 require 进来的组件并注册
requireComponent.keys().forEach((fileName) => {
  const componentConfig = requireComponent(fileName)
  const componentName = upperFirst( camelCase( fileName.replace(/^\.\/_/, '').replace(/\.\w+$/, '') ) )
  // 全局注册组件
  Vue.component(componentName, componentConfig.default || componentConfig)
})
  1. 编辑 nuxt.config.js 加入插件选项中
plugins: [
'@/plugins/global-components'
]
  1. OJBK,搞定完事!

你可能感兴趣的:(在nuxt中自动挂载vue全局基础组件)