vue2中引入共用組件
\\ components/index.js
import Vue from 'vue'
import LayoutContent from './layout/LayoutContent'
import FormPart from './form-part'
Vue.component(LayoutContent.name, LayoutContent)
Vue.component(FormPart.name, FormPart)
main.js 中引入
import './components'
就可以了漓糙！
vue3中引入共用組件
\\ components/index.js
import FormPart from './form-part/index.vue'
import LayoutContent from "./layout/LayoutContent.vue";
export default {
install(app) {
app.component(FormPart.name, FormPart);
app.component(LayoutContent.name, LayoutContent);
},
};
main.js 中引入
import Components from '@/components'
const app = createApp(App)
app.use(Components)
app.mount('#app')
就可以了蝇庭！
批量注冊
vue2的時候
/* Components */
import Vue from 'vue'
const components = require.context('./', true, /index\.vue$/);
components.keys().forEach(key => {
let component = components(key).default;
Vue.component(component.name, component)
})
vue3 用vite不能使用require.context喷屋，要使用import.meta.globEage
/* Components */
const components= import.meta.globEager('./*/index.vue')
export default {
install(app) {
Object.keys(components).forEach(key => {
let component = components[key].default
app.component(component.name, component)
})
},
};
