vue 注册全局基础组件
Posted ljmin9527
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 注册全局基础组件相关的知识,希望对你有一定的参考价值。
vue 注册全局基础组件
- 使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+),那么就可以使用 require.context
- 在
src/main.js
写入以下关键代码 - 必须在根 Vue 实例 (通过 new Vue) 创建之前发生
import Vue from ‘vue‘
import upperFirst from ‘lodash/upperFirst‘
import camelCase from ‘lodash/camelCase‘
const requireComponent = require.context(
// 其组件目录的相对路径
‘./components‘,
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/Base[A-Z]w+.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 获取和目录深度无关的文件名
fileName
.split(‘/‘)
.pop()
.replace(/.w+$/, ‘‘)
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})
new Vue({
render: h => h(App)
}).$mount(‘#app‘)
- 直接调用即可
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<!-- BaseTitle.vue 就是在./components/base 目录下的文件 -->
<base-title/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from ‘@/components/HelloWorld.vue‘
export default {
name: ‘Home‘,
components: {
HelloWorld,
// 这里并没有注册BaseTitle,就能用了
}
}
</script>
以上是关于vue 注册全局基础组件的主要内容,如果未能解决你的问题,请参考以下文章