一. 组件化开发项目

1. 准备工作

1. 将准备好的App.vue中的内容复制到项目中
2. 将图片保存到assets下的images下
3. 在main.js中引入css样式
   import './styles/base.css'
import './styles/common.css'
import './styles/index.css'

2. 开发思路

1. 分析页面, 按照模块拆分组件, 搭架子(局部注册或全局注册)
2. 根据设计图, 编写html结构, css样式 – 已准备
3. 拆分封装通用的小组件

3. 拆分页面图

XtxShortCut
XtxHeaderNav
XtxBanner
XtxNewGoods
XtxHotBrand
XtxTopic
XtxFooter

XtxShortCut => 快捷链接
XtxHeaderNav => 顶部导航
XtxBanner => 轮播区域
XtxNewGoods => 新鲜好物
XtxHotBrand => 热门品牌
XtxTopic => 最新专题
XtxFooter => 版权底部

4. App.vue

<template><div class="App"><!-- 快捷链接组件 --><XtxShowrtCut></XtxShowrtCut><!-- 头部导航组件 --><XtxHeaderNav></XtxHeaderNav><!-- 轮播区组件 --><XtxBanner></XtxBanner><!-- 新鲜好物组件 --><XtxNewGoods></XtxNewGoods><!-- 热门品牌组件 --><XtxHotBrand></XtxHotBrand><!-- 最新专题组件 --><XtxTopic></XtxTopic><!-- 版权底部组件 --><XtxFooter></XtxFooter></div>
</template><script>
// 导入组件
import XtxShowrtCut from './components/XtxShowrtCut.vue';
import XtxHeaderNav from './components/XtxHeaderNav.vue';
import XtxBanner from './components/XtxBanner.vue';
import XtxNewGoods from './components/XtxNewGoods.vue';
import XtxHotBrand from './components/XtxHotBrand.vue';
import XtxTopic from './components/XtxTopic.vue';
import XtxFooter from './components/XtxFooter.vue';
export default {// 注册组件components: {XtxShowrtCut,XtxHeaderNav,XtxBanner,XtxNewGoods,XtxHotBrand,XtxTopic,XtxFooter}
}
</script><style></style>

5. 项目优化 - 全局注册两个小组件

BaseGoodsItem

<template><li class="base-goods-item"><a href="#"><div class="pic"><img src="@/assets/images/goods1.png" alt="" /></div><div class="txt"><h4>KN95级莫兰迪色防护口罩</h4><p>¥ <span>79</span></p></div></a></li>
</template><script>
export default {}
</script><style>
.base-goods-item {width: 304px;height: 404px;background-color: #EEF9F4;
}.base-goods-item {display: block;
}.base-goods-item .pic {width: 304px;height: 304px;
}.base-goods-item .txt {text-align: center;
}.base-goods-item h4 {margin-top: 17px;margin-bottom: 8px;font-size: 20px;
}.base-goods-item p {font-size: 18px;color: #AA2113;
}.base-goods-item p span {font-size: 22px;
}
</style>

BaseBrandItem

<template><li class="base-brand-item"><a href="#"><img src="@/assets/images/hot1.png" alt="" /></a></li>
</template><script>
export default {}
</script><style>
.base-brand-item {width: 244px;height: 306px;
}
</style>

二. 组件三大组成部分细节

1. 样式设置

BaseOne.vue

<template><div class="base-one">BaseOne</div>
</template><script>
export default {}
</script><style scoped>
/*1. style样式,默认是作用到全局的2. 加上scoped属性可以将样式变为局部样式组件都应该有自己的样式, 推荐加scoped---------------------------------scoped原理:1. 给当前组件模板的所有元素,都会添加一个自定义属性data-v-hash值data-v-5f6a9d56  --- 区分不同组件2. css选择器后,被自动处理,添加属性选择器div[data-v-5f6a9d56]{}
*/
div {border: 3px solid red;margin: 30px;
}
</style>

BaseTwo.vue

<template><div class="base-two">BaseTwo</div>
</template><script>
export default {}
</script><style scoped>
div {border: 3px solid skyblue;margin: 30px;
}
</style>

2. data必须是一个函数

2.1 原因

目的: 保证每个组件实例,维护独立的一份数据对象
每次创建新的数组实例, 都会新执行一次data函数, 得到一个新的对象

BaseCount.vue

<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</template><script>
export default {// data:{ }// data必须是一个函数// 目的: 保证每个组件实例, 维护独立的一份数据data: function () {return {count: 100}}
}
</script><style>
.base-count {margin: 20px;
}
</style>

App.vue

<template><div class="App"><!-- 没运行一次实例, 都会重新执行一次data函数 --><BaseCount></BaseCount><BaseCount></BaseCount><BaseCount></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount.vue';
export default {components: {BaseCount}
}
</script><style></style>