vue2 _globals.js
import Vue from 'vue'
const requireComponent = require.context(
'@/components/', // 指定目录
true, // 是否加载子目录
/.vue/ // 后缀名
)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = fileName.replace(/(\.\/|\.vue)/g, '').replace(new RegExp('/', 'g'), '')
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,否则回退到使用模块的根。
componentConfig.default || componentConfig
)
console.log('全局注册组件', componentName)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
main.js引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 引入自动化全局注册js文件
import './components/_globals'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
vue3 _globals.js
export default {
install (app) {
const requireComponent = require.context(
'@/components/', // 指定目录
true, // 是否加载子目录
/.vue/ // 后缀名
)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = fileName.replace(/(\.\/|\.vue)/g, '').replace(new RegExp('/', 'g'), '')
// 全局注册组件
app.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,否则回退到使用模块的根。
componentConfig.default || componentConfig
)
console.log('全局注册组件', componentName)
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
main.js引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import globalComponents from '@/components/_globals'
createApp(App).use(store).use(router).use(globalComponents).mount('#app')
1
2
3
4
5
6
7
2
3
4
5
6
7