【vue】组件综合案例-小兔鲜首页

拆分模块-组件拆分

将页面的不同的模块拆分成一个单独的组件

单独组件内还能继续拆

案例实现

网页访问的是App.vue中的内容

首先是分好组件后，创建组件并使用

要使用这个组件就要创建.vue文件，然后导入和注册

创建.vue文件

导入

注册

使用

效果展示

在浏览器上访问后就能成功访问到了

其余的组件跟上面的步骤一样建立.vue文件，导入、注册最后使用

效果全部展示出来了

实现结构和样式并拆分组件

/* 所有折叠：ctrl+k ctrl+0 */

/* 所以展开：ctrl+k ctrl+j */

1.将网页结构html写到组件的结构中

再将样式写到组件的样式里面

就能展示出来了

其余的组件也是如此操作，就能将其展示出来了

细节：

在一个组件中，仍然可以再拆分成几个小组件

代码也没必要写这么多li标签

这些基础组件可以注册为全局组件，供大家使用

创建.vue文件

在main.js中进行导入和注册

然后使用

效果展示

同时要展示多个相同的组件时，不用一个个去cv，用上v-for

效果是一样的