废话不多说:专门处理细碎的基础组件
vue全局组件注册就是从官网搬来的, 点这里直飞vue官网
- 在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)
})
- 编辑 nuxt.config.js 加入插件选项中
plugins: [
'@/plugins/global-components'
]
- OJBK,搞定完事!
网友评论