vue系列教程之微商城项目|主页

轮播图 

1.引入轮播图组件

main.js

2.新建轮播图组件

components/zhuye/swiper.vue

3.引入轮播图查看效果

zhuye.vue

效果图

4.轮播图数据请求

1）安装axios，创建 'src/network/' 文件夹，用于集中存放数据请求代码

在项目根目录下打开cmd窗口，执行以下命令

2) 设置跨域请求

vue.config.js

3)编写请求函数

src/network/base.js

src/network/request.js

4)更改轮播图组件，数据用props从外部传入

components/zhuye/swiper.vue

5)在主页中请求数据，并传入轮播图组件中 

zhuye.vue

6）查看效果图

格子按钮

1.图标下载

图标下载地址：https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=26483

存放在assets/zhuye/下

2.利用vant-ui的宫格布局实现排版

1)宫格组件引入

main.js

2)封装宫格组件

components/zhuye/gridBar.vue

<van-grid-item>标签属性说明如下

3)在主页中引入并传入数据

zhuye.vue

3.查看效果

本篇文章是该系列文章中的第七篇，讲述的是关于制作主页的相关步骤。下篇系列文章之新闻资讯正在打造之中，敬请期待。

实习编辑：隆阳

稿件来源：深度学习与文旅应用实验室（DLETA）