vue学习日记16：拆分模块组件

小兔鲜网页首页案例

一、准备阶段

1.导入文件

把准备的src复制到vue-demo1下面  然后npm  run serve 即可  

情况app.vue里面的内容 别怕上面有备份

2.组件注册

在准备物料里面组件名称可以看见 七个组件需要注册

 

我这里给一个例子代码

 XtxHeaderNav.vue

<template>
<div>顶部导航</div>
</template>

<script>
export default {
  name: "XtxHeaderNav"
}
</script>

<style scoped>

</style>

  引入注册和使用

二、结构和样式设置

以快捷链接为例子 其他的一样

在备份里面复制对应的样式到组件里面

同理把样式也粘贴进去

 如下图

 拼接好之后如图  真的感受到vue的搭积木的快乐 各模块相互独立

三、小组件封装-全局注册

像这样的小组件循环使用的可以全局注册

 创建BaseGoodsItem.vue

把XtxNewGoods 的<li>剪切一个进去 对应的style也全剪切进去

 

 更改对应的样式名字

进行注册即可

同理hotbrand也是一样的 

使用v-for 也可以这样写 

感受模块化思维即可 

-----------------------------------------------------------------------------------------------------------------------------

注：本人是根据黑马程序员的B站教程来学习的，
链接：https://www.bilibili.com/video/BV1HV4y1a7n4/?spm_id_from=333.999.0.0

本文章仅仅是个人学习笔记 无任何其他用途 特此说明