文章目錄
- 一、路由規劃
- 1. 新建路由配置
- 2. 下載vue-router
- 3. 路由注冊
- 4. 路由基礎配置
- 5. 路由掛載
- 6. AppTabBar
- 7.
- 二、移動端首頁
- 2.1.首頁效果
- 2.2. 首頁接口請求
- 2.3. 首頁頁面
- 2.4. 首頁頁面
- 三、首頁組件
- 3.1. 輪播圖SwiperCom
- 3.2. Grid 居家-志趣組件
- 3.3. 類別頁組件
- 3.4. 品牌制造商直供
- 3.5. 品牌詳情頁
- 3.6. 周一周四新品首發
- 3.7. 人氣推薦 top組件
- 3.8. 專題精選TopicBox
技術選型
組件版本說明
| vue | ^2.6.11 | 數據處理框架 |
| vue-router | ^3.5.3 | 動態路由 |
| vant | ^2.12.37 | 移動端UI |
| axios | ^0.24.0 | 前后端交互 |
| amfe-flexible | ^2.2.1 | Rem 布局適配 |
| postcss-pxtorem | ^5.1.1 | Rem 布局適配 |
| less | ^4.1.2 | css編譯 |
| less-loader | ^5.0.0 | css編譯 |
| vue/cli | ~4.5.0 | 項目腳手架 |
vue-cli + vant+ less +axios 開發
一、路由規劃
項目路由規劃配置
如果項目中所有的路由都寫在入口文件中，那么將不便于編寫項目和后期維護。因此路由需要進行模塊化處理。
1. 新建路由配置
在src目錄下創建router目錄,該目錄下新建index.js 用于 編寫路由配置
2. 下載vue-router
npm install vue-router
3. 路由注冊
在index.js 文件中安裝使用vue-router
router/index.js 內容：
import Vue from
'vue'
import VueRouter from
'vue-router'
Vue.use
(VueRouter
)
4. 路由基礎配置
在index.js文件中編寫項目路由基礎配置
- List item
- 首頁模塊
- 專題模塊
- 分類模塊
- 購物車模塊
- 我的模塊
router/index.js 新增基礎路由內容：
// 配置項目路由
const router
= new VueRouter
({routes:
[{path:
'/',redirect:
'/home' // 重定向
},
{path:
'/home', //首頁name:
'Home',component:
() => import
('@/views/home/Home'),children:
[ // 二級路由 不能加
'/' 加
'/'表示一級路由
{path:
'searchPopup',component:
() => import
('@/views/home/search/searchPopup.vue'),name:
'searchpopup',meta:
{isshowtabbar:
false},
}],meta:
{isShowTabbar:
true}},
{path:
'/topic', //專題name:
'Topic',component:
() => import
('@/views/topic/Topic'),meta:
{isShowTabbar:
true}},
{path:
'/category', //分類name:
'Category',component:
() => import
('@/views/category/Category'),meta:
{isShowTabbar:
true}},
{path:
'/cart', //購物車name:
'Cart',component:
() => import
('@/views/cart/Cart'),meta:
{isShowTabbar:
true}},
{path:
'/user', //我的name:
'User',component:
() => import
('@/views/user/User'),meta:
{isShowTabbar:
true}},
{path:
'/productDetail', //產品詳情name:
'ProductDetail',component:
() => import
('@/views/productdetail/ProductDetail')},
{path:
'/channel', // 產品分類頁面（從首頁類別點進去如 居家-餐廚-配件。。。 ）name:
'Channel',component:
() => import
('@/views/channel/Channel.vue')},
{path:
'/brand', // 品牌name:
'brand',component:
() => import
('@/views/brand/Brand.vue')},
]
})export default router
5. 路由掛載
main.js： router 掛載到根實例對象上
根據路由配置，在src目錄下的views 文件中，分別創建tabbar 對應的組件文件。
在main.js 文件中引入router 文件下的index.js 路由配置文件，并在根實例中注冊。
// 在 入口文件mian.js 引入路由文件
import router from
'@/router/index.js';
new Vue
({render: h
=> h
(App
),router // router 掛載到根實例對象上
}).
$mount('#app')
6. AppTabBar
components /AppTabBar.vue
在components 文件中,創建一個AppTabBar.vue組件,配置底部tabbar,直接可以使用vant的tabbar組件
<template
><div
class="app-tab-bar"><!-- 下方導航 --
><van-tabbarv-model
="active"active-color
="#ee0a24"inactive-color
="#000"@change
="onChange"shape="round"route
><van-tabbar-item
icon="home-o" to="/home">首頁
</van-tabbar-item
><van-tabbar-item
icon="label-o" to="/topic">專題
</van-tabbar-item
><van-tabbar-item
icon="apps-o" to="/category">分類
</van-tabbar-item
><van-tabbar-item
icon="shopping-cart-o" to="/cart">購物車
</van-tabbar-item
><van-tabbar-item
icon="user-o" to="/user">我的
</van-tabbar-item
></van-tabbar
></div
>
</template
>
<script
>
export default
{name:
"app-tab-bar",
data () {return {active:0
}},methods:
{onChange
(m
) {this.active
= m
},
},
};
</script
><style
lang='less' scoped
></style
>
將AppTabBar.vue導入app.vue 跟組件
<template
><div
id="app"><!-- 路由對應的組件存放到router-view中--
><router-view
></router-view
><!-- 底部tabbar 組件 --
><AppTabBar v-show
="$route.meta.isShowTabbar"></AppTabBar
></div
>
</template
><script
>
// 引入底部tabbar 組件
import AppTabBar from
'./components/AppTabBar.vue';export default
{name:
'App',components:
{AppTabBar,
},
};
</script
><style
lang='less' scoped
></style
>
7.
二、移動端首頁
2.1.首頁效果
首頁展示的數據
2.2. 首頁接口請求
http.js文件中的接口請求
//1. 首頁 Home
// 獲取首頁數據列表
export function getIndexList() {return instance.get
('/index/index')
}
2.3. 首頁頁面
home/home.vue
2.4. 首頁頁面
<template
><div
class="home"><!-- 二級路由坑 --
><router-view v-if
="$route.path === '/home/searchPopup'"></router-view
><main v-else
><!--搜索框 --
><van-search
shape="round"v-model
="value"show-action
placeholder="請輸入搜索關鍵詞"@search
="onSearch"@cancel
="onCancel"@click
="$router.push('/home/searchPopup')"/
><!-- 輪播圖 --
><SwiperCom :banner
="banner"></SwiperCom
><!-- grid 居家-志趣組件 --
><Grid :channel
="channel"></Grid
><!-- 品牌制造商直供 --
><Support :brandList
="brandList"></Support
><!-- 周一周四新品首發 --
><Weekproduct:newGoodsList
="newGoodsList"title="周一周四新品首發"></Weekproduct
><!-- 人氣推薦 top組件 --
><!-- v-if 保證了有數據才渲染該組件，等渲染該組件的時候，才執行該組件的生命周期函數--
><Top :hotGoodsList
="hotGoodsList" v-if
="hotGoodsList.length>0"></Top
><!-- 專題精選 --
><TopicBox :topicList
="topicList" title="專題精選"></TopicBox
><!-- 產品列表 --
><Weekproductv-for
="item in categoryList":key
="item.id":newGoodsList
="item.goodsList":title
="item.name"></Weekproduct
></main
></div
>
</template
><script
>
// 導入輪播圖組件
import SwiperCom from
"@/components/SwiperCom";
import { getIndexList
} from
"@/https/http.js";
// 引入 grid 居家-志趣組件
import Grid from
"@/views/home/Grid";
// 引入support 組件-品牌制造商直供
import Support from
"@/views/home/Support";
import Weekproduct from
"@/views/home/Weekproduct";
import TopicBox from
"@/views/home/TopicBox";
import Top from
'@/views/home/Top'
export default
{name:
"home",
data() {return {value:
"",banner:
[], //輪播圖channel:
[], //居家-志趣數據brandList:
[], // 品牌制造商數據newGoodsList:
[], // 周一周四新品首發數據hotGoodsList:
[], // 人氣推薦topicList:
[], // 專題精選categoryList:
[] //產品列表
};},components:
{SwiperCom,Grid,Support,Weekproduct,TopicBox,Top,
},
created() {// 發送請求，獲取數據getIndexList
().then
((res
) => {console.log
("res", res
);this.banner
= res.data.banner
;this.channel
= res.data.channel
;this.brandList
= res.data.brandList
;this.newGoodsList
= res.data.newGoodsList
;this.topicList
= res.data.topicList
;this.categoryList
= res.data.categoryList
;this.hotGoodsList
= res.data.hotGoodsList
;});},methods:
{onSearch() { },
onCancel() { },
},
};
</script
><style
lang="less" scoped
>
.home
{padding-bottom: 100px
;box-sizing: border-box
;
}
</style
>
三、首頁組件
3.1. 輪播圖SwiperCom
<template
><!-- 輪播圖 --
><div
class="swiper-com"><van-swipe
class="my-swipe" :autoplay
="1000" indicator-color
="white"><van-swipe-item v-for
="item in banner" :key
="item.id" ><img :src
="item.image_url" alt=""></van-swipe-item
></van-swipe
></div
>
</template
><script
>
export default
{name:
'swiper-com',props:
['banner'],
}
</script
><style
lang="less" scoped
>.swiper-com
{width:
100%
;img
{width:
100%
;}}
</style
>
3.2. Grid 居家-志趣組件
<template
><div
class="gird"><van-grid :column-num
="5" channel.length
><van-grid-itemv-for
="item in channel":key
="item.id":icon
="item.icon_url":text
="item.name"@click
="btn(item.id)"/
></van-grid
></div
>
</template
><script
>
export default
{name:
"gird",props:
["channel"],methods:
{btn
(id
){this.
$router.push
({path:
'/channel', query:
{id: id
}})}}
};
</script
><style
>
</style
>
3.3. 類別頁組件
Channel.vue
<template
><div
class="channel-box"><van-tabs sticky @change
="changeFn"><van-tab v-for
="item in brotherCategory" :key
="item.id" :title
="item.name" ><h
4>{{ item.name
}}</h
4><p
>{{ front_desc
}}</p
><!-- 產品列表 --
><Products :goodsList
="goodsList" /
></van-tab
></van-tabs
></div
>
</template
><script
>
import { GetCateGoryData, GetCateGoryList
} from
"@/https/http";
import Products from
"@/components/Products";export default
{name:
"channel",
data() {return {id_:
"0", // 當前類別的idpage:
1, // 當前頁數size:
1000, //每頁顯示條數brotherCategory:
[], // 分類數組goodsList:
[], //當前類別對應的商品列表front_desc:
"",
};},
created() {this.id_
= this.
$route.query.id
;this.getCategoryData
(); //獲取所有分類數據this.getCategoryListData
(); //獲取當前類別對應的產品數組
}, methods:
{//獲取所有分類數據
getCategoryData() {GetCateGoryData
({ id: this.id_
}).then
((res
) => {this.brotherCategory
= res.data.brotherCategory
; // 全部分類數組this.currentCategory
= res.data.currentCategory
; // 當前分類對象this.front_desc
= this.currentCategory.front_desc
; // 當前類別文字描述
});},//獲取當前類別對應的產品數組
getCategoryListData() {GetCateGoryList
({categoryId: this.id_,page: this.page,size: this.size,
}).then
((res
) => {console.log
(33, res
);if (res.errno
== 0) {this.goodsList
= res.data.goodsList
;}});},// / 切換分類changeFn
(title, name
) {// title 下標// name: 分類標題this.brotherCategory.forEach
((item
) => {if (item.name
== name
) {this.id_
= item.id
;}});this.getCategoryListData
();this.getCategoryData
();},
},components:
{Products,
},
};
</script
><style
lang="less" scoped
>
.channel-box
{text-align: center
;font-size: 16px
;line-height: 40px
;p
{color:
}
}
</style
>
3.4. 品牌制造商直供
<template
><div
class="support"><ul
><li v-for
="item in brandList" :key
="item.id" @click
="clickFn(item.id)"><img :src
="item.pic_url" alt=""><h
4>{{item.name
}}</h
4><p
>{{item.floor_price
|moneyFlrmat
}}</p
></li
></ul
></div
>
</template
><script
>
export default
{name:
'support',props:
['brandList'],methods:
{clickFn
(id
){this.
$router.push
({path:
'/brand', query:
{id: id
}})}}
}
</script
><style
lang="less" scoped
>.support
>ul
{width:
100%
;display: flex
;justify-content: space-between
;flex-wrap: wrap
;li
{width:
49%
;position: relative
;img
{width:
100%
;}h4
{font-size: 16px
;position: absolute
;left: 20px
;top: 30px
;}p
{font-size: 15px
;position: absolute
;left: 30px
;top: 60px
;color: red
;}}}
</style
>
3.5. 品牌詳情頁
<template
><div
class="brand-box"><h
4>{{ name
}}</h
4><img :src
="list_pic_url" alt="" /
><p
>{{ simple_desc
}}</p
></div
>
</template
><script
>
import { GetBrandList
} from
'@/https/http'
export default
{name:
'brand',
data() {return {name:
'',simple_desc:
'',list_pic_url:
'',page:
1,size:
1000,
}},
created() {this.getBrandData
()},methods:
{// 發送請求，獲取品牌詳情頁數據
getBrandData() {GetBrandList
({ id: this.
$route.query.id
}).then
((res
) => {console.log
(res
);this.name
= res.data.brand.namethis.simple_desc
= res.data.brand.simple_descthis.list_pic_url
= res.data.brand.list_pic_url
})},
}
}
</script
><style
lang="less" scoped
>
.brand-box
{text-align: center
;font-size: 16px
;line-height: 40px
;img
{width:
100%
;}
}
</style
>
3.6. 周一周四新品首發
<template
><div
class="week-product"><div
class="mytitle"><span
></span
><h
3>{{ title
}}</h
3></div
><ul
><li v-for
="item in newGoodsList" :key
="item.id" @click
="clickFn(item.id)"><img :src
="item.list_pic_url" alt="" /
><p
>{{ item.name
}}</p
><p
>{{ item.retail_price
}}</p
></li
></ul
></div
>
</template
><script
>
export default
{name:
'week-product',props:
['newGoodsList',
'title'],methods:
{clickFn
(id
) {this.
$router.push
({ path:
'/productDetail', query:
{ id:
id } })}}
}
</script
><style
lang="less" scoped
>
.week-product
{.mytitle
{text-align: center
;font-size: 16px
;margin-top: 20px
;position: relative
;height: 50px
;span
{width:
50%
;height: 2px
;background-color: display: inline-block
;position: absolute
;left:
50%
;top:
50%
;transform: translate
(-50%, -50%
);}h3
{width:
30%
;background-color: position: absolute
;left:
50%
;top:
50%
;transform: translate
(-50%, -50%
);}}ul
{display: flex
;justify-content: space-between
;flex-wrap: wrap
;li
{width:
49%
;img
{width:
100%
;}p
{text-align: center
;font-size: 16px
;}}}
}
</style
>
3.7. 人氣推薦 top組件
<template
><div
class="top-box"><h
3>人氣推薦
</h
3><div
class="content" v-for
="item in hotGoodsList" :key
="item.id"><van-card:key
="item.id":price
="item.retail_price":desc
="item.goods_brief":title
="item.name":thumb
="item.list_pic_url"@click
="clickFn(item.id)"/
></div
></div
><!-- v-for
="item in hotGoodsList -->
</template><script>
export default {name: 'top',props: ['hotGoodsList'],created() {console.log(555, this.hotGoodsList);},methods: {clickFn(id) {this.$router.push({ path: '/productDetail', query: { id: id } })}}
}
</script><style lang="less" scoped
>
.top-box
{h3
{font-size: 22px
;line-height: 60px
;text-align: center
;}
}
</style
>
3.8. 專題精選TopicBox
<template
><div
class="topic"><h
3>{{ title
}}</h
3><van-swipe
class="my-swipe" :autoplay
="1000" indicator-color
="white"><van-swipe-itemv-for
="item in topicList":key
="item.id"><img :src
="item.item_pic_url" alt="" /
><p
>{{ item.title
}}</p
><p
>{{ item.subtitle
}}</p
></van-swipe-item
></van-swipe
></div
>
</template
><script
>
export default
{name:
'topic',props:
['topicList',
'title'],
}
</script
><style
lang="less" scoped
>
.topic
{width:
100%
;text-align: center
;font-size: 16px
;h3
{font-size: 22px
;line-height: 60px
;text-align: center
;}.my-swipe
{display: flex
;img
{width:
100%
;height: 200px
;}}
}
</style
>
總結
以上是生活随笔為你收集整理的vue+vant 移动端H5 商城项目_02的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
