本文首發于微信公眾號："算法與編程之美"，歡迎關注，及時了解更多此系列文章。

輪播圖?

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.d9df0 5512&cid=26483

存放在assets/zhuye/下

2.利用vant-ui的宮格布局實現排版?

1)宮格組件引入?

main.js

2)封裝宮格組件

components/zhuye/gridBar.vue

標簽屬性說明如下

3)在主頁中引入并傳入數據

zhuye.vue

3.查看效果

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

實習編輯：隆陽

稿件來源：深度學習與文旅應用實驗室(DLETA)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。