小兔鲜网页首页案例
一、准备阶段
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
本文章仅仅是个人学习笔记 无任何其他用途 特此说明