2019-06-14 | vue | UNLOCK

vue自动注册全局组件

main.js的代码如下

main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import upperFirst from 'lodash/upperFirst' // 没有包,请导入:npm i lodash.upperfirst 或 yarn add --dev lodash.upperfist
import camelCase from 'lodash/camelCase' // 没有包,请导入:npm i lodash.camelcase 或 yarn add --dev lodash.camelcase

// 主要代码:开始
const requireComponent = require.context(
'./components/autoload',
false,
/_base-[\w-]+\.vue$/
)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = upperFirst(
camelCase(fileName.replace(/^\.\/_/, '').replace(/\.\w+$/, ''))
)

Vue.component(componentName, componentConfig.default || componentConfig)
})
// 主要代码:结束

Vue.config.productionTip = false

new Vue({
router,
render: h => h(App)
}).$mount('#app')

文件目录如图

App.vue代码如下

App.vue
1
2
3
4
5
<template>
<div id='app'>
<BaseTest />
</div>
</template>

最后页面显示效果

效果图

vue

评论加载中