vue仿elementUi全局封装UI组件
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>
好文推荐
