本文首發(fā)于微信公眾號(hào)："算法與編程之美"，歡迎關(guān)注，及時(shí)了解更多此系列文章。

輪播圖?

1.引入輪播圖組件

main.js

2.新建輪播圖組件

components/zhuye/swiper.vue

3.引入輪播圖查看效果

zhuye.vue

效果圖

4.輪播圖數(shù)據(jù)請(qǐng)求

1)安裝axios，創(chuàng)建 'src/network/' 文件夾，用于集中存放數(shù)據(jù)請(qǐng)求代碼

在項(xiàng)目根目錄下打開cmd窗口，執(zhí)行以下命令

2) 設(shè)置跨域請(qǐng)求

vue.config.js

3)編寫請(qǐng)求函數(shù)

src/network/base.js

src/network/request.js

4)更改輪播圖組件，數(shù)據(jù)用props從外部傳入

components/zhuye/swiper.vue

5)在主頁中請(qǐng)求數(shù)據(jù)，并傳入輪播圖組件中?

zhuye.vue

6)查看效果圖

格子按鈕

1.圖標(biāo)下載

圖標(biāo)下載地址：https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df0 5512&cid=26483

存放在assets/zhuye/下

2.利用vant-ui的宮格布局實(shí)現(xiàn)排版?

1)宮格組件引入?

main.js

2)封裝宮格組件

components/zhuye/gridBar.vue

標(biāo)簽屬性說明如下

3)在主頁中引入并傳入數(shù)據(jù)

zhuye.vue

3.查看效果

本篇文章是該系列文章中的第七篇，講述的是關(guān)于制作主頁的相關(guān)步驟。下篇系列文章之新聞資訊正在打造之中，敬請(qǐng)期待。

實(shí)習(xí)編輯：隆陽

稿件來源：深度學(xué)習(xí)與文旅應(yīng)用實(shí)驗(yàn)室(DLETA)

總結(jié)

以上是生活随笔為你收集整理的vue怎么引入外部地址_vue系列教程之微商城项目|主页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。