!
也想出现在这里? 联系我们
广告位
当前位置:首页>技术分享>编程技术>vue仿elementUi全局封装UI组件

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>

给TA打赏
共{{data.count}}人
人已打赏
编程技术

移动端H5之css配置rem

2022-10-1 20:40:27

编程技术

VUE生成二维码

2022-10-1 20:41:02

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 2651636361@qq.com 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索