Vue全局自动化组件

Vue全局注册组件

Vue2

//Vue2注册全局组件
//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import helloworld from '@/components/helloworld.vue'

Vue.config.productionTip = false

Vue.component('helloworld',helloworld);

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

当要全局注册的组件非常多时，可以使用自动化注册组件代替手动注册

//Vue2自动化注册组件
//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

const components = require.context('@/components/', true, /\.vue$/)
components.keys().forEach(filename => {
  const arr = filename.replace(/\.\//, '').replace(/\.vue$/, '').split('/')
  const component = components(filename).default
  // 注册
  Vue.component(arr[0], component)
})

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

require.context是webpack的API

---

Vue3

//Vue3注册全局组件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import helloworld from '@/components/helloworld.vue'

let app=createApp(App);
app.component('helloworld', helloworld )

app.use(store).use(router).mount('#app')

//Vue3自动化注册全局组件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import helloworld from '@/components/helloworld.vue'

let app=createApp(App);
const components = require.context('@/components/', true, /\.vue$/)
components.keys().forEach(filename => {
  const arr = filename.replace(/\.\//, '').replace(/\.vue$/, '').split('/')
  const component = components(filename).default
  // 注册
  app.component(arr[0], component)
})

app.use(store).use(router).mount('#app')

经过全局注册的组件，在页面中就不需要重新引入，可以直接使用

例如Home.vue

//Home.vue
<template>
  <div class="home">
    <helloworld></helloworld>
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>