vue仿elementUi全局封装UI组件

歪脖37684

3948浏览

2020-10-22 15:58:58

1：在项目components目录新建文件

components

| - webBlogUi

| -- index.js

| -- head.vue

| -- footer.vue

2：组件内容

<template>
	<div>
      head or footer
	</div>
</template>

<script>
	export default {
		name: 'Head'
	}	
</script>

<style>
</style>

3：index.js内容

import Head from './head.vue';
import Footer from './footer.vue';

const components = [
	Head,
	Footer
]

const webBlogUi = {
	install : (Vue) => {
		components.forEach(component => {
			Vue.component(component.name, component);
		});
	}
}

export default webBlogUi;

4：在main.js中注册

import webBlogUi from '@/components/webBlogUi/index.js'
Vue.use(webBlogUi);

//import ElementUI from 'element-ui'
//import 'element-ui/lib/theme-chalk/index.css'
//Vue.use(ElementUI)

5：页面中使用

<template>
	<div>
      <Head></Head>
	</div>
</template>

<script>
	export default {
	}	
</script>

<style>
</style>