文章目錄

• • • • • 一、路由規(guī)劃
        • • 1. 新建路由配置
          • 2. 下載vue-router
          • 3. 路由注冊
          • 4. 路由基礎(chǔ)配置
          • 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. 周一周四新品首發(fā)
          • 3.7. 人氣推薦 top組件
          • 3.8. 專題精選TopicBox

技術(shù)選型

組件版本說明

vue	^2.6.11	數(shù)據(jù)處理框架
vue-router	^3.5.3	動態(tài)路由
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	項(xiàng)目腳手架

vue-cli + vant+ less +axios 開發(fā)

一、路由規(guī)劃

項(xiàng)目路由規(guī)劃配置
如果項(xiàng)目中所有的路由都寫在入口文件中，那么將不便于編寫項(xiàng)目和后期維護(hù)。因此路由需要進(jìn)行模塊化處理。

1. 新建路由配置

在src目錄下創(chuàng)建router目錄,該目錄下新建index.js 用于 編寫路由配置

2. 下載vue-router

npm install vue-router

3. 路由注冊

在index.js 文件中安裝使用vue-router
router/index.js 內(nèi)容：

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)

4. 路由基礎(chǔ)配置

在index.js文件中編寫項(xiàng)目路由基礎(chǔ)配置

• List item
• 首頁模塊
• 專題模塊
• 分類模塊
• 購物車模塊
• 我的模塊

router/index.js 新增基礎(chǔ)路由內(nèi)容：

// 配置項(xiàng)目路由 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', //產(chǎn)品詳情name: 'ProductDetail',component: () => import('@/views/productdetail/ProductDetail')},{path: '/channel', // 產(chǎn)品分類頁面（從首頁類別點(diǎn)進(jìn)去如 居家-餐廚-配件。。。 ）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 掛載到根實(shí)例對象上
根據(jù)路由配置，在src目錄下的views 文件中，分別創(chuàng)建tabbar 對應(yīng)的組件文件。

在main.js 文件中引入router 文件下的index.js 路由配置文件，并在根實(shí)例中注冊。

// 在 入口文件mian.js 引入路由文件 import router from '@/router/index.js'; new Vue({render: h => h(App),router // router 掛載到根實(shí)例對象上 }).$mount('#app')

6. AppTabBar

components /AppTabBar.vue

在components 文件中,創(chuàng)建一個AppTabBar.vue組件,配置底部tabbar,直接可以使用vant的tabbar組件

<template><div class="app-tab-bar"><!-- 下方導(dǎo)航 --><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導(dǎo)入app.vue 跟組件

<template><div id="app"><!-- 路由對應(yīng)的組件存放到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.首頁效果

首頁展示的數(shù)據(jù)

2.2. 首頁接口請求

http.js文件中的接口請求

//1. 首頁 Home // 獲取首頁數(shù)據(jù)列表 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-searchshape="round"v-model="value"show-actionplaceholder="請輸入搜索關(guān)鍵詞"@search="onSearch"@cancel="onCancel"@click="$router.push('/home/searchPopup')"/><!-- 輪播圖 --><SwiperCom :banner="banner"></SwiperCom><!-- grid 居家-志趣組件 --><Grid :channel="channel"></Grid><!-- 品牌制造商直供 --><Support :brandList="brandList"></Support><!-- 周一周四新品首發(fā) --><Weekproduct:newGoodsList="newGoodsList"title="周一周四新品首發(fā)"></Weekproduct><!-- 人氣推薦 top組件 --><!-- v-if 保證了有數(shù)據(jù)才渲染該組件，等渲染該組件的時候，才執(zhí)行該組件的生命周期函數(shù)--><Top :hotGoodsList="hotGoodsList" v-if="hotGoodsList.length>0"></Top><!-- 專題精選 --><TopicBox :topicList="topicList" title="專題精選"></TopicBox><!-- 產(chǎn)品列表 --><Weekproductv-for="item in categoryList":key="item.id":newGoodsList="item.goodsList":title="item.name"></Weekproduct></main></div> </template><script> // 導(dǎo)入輪播圖組件 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: [], //居家-志趣數(shù)據(jù)brandList: [], // 品牌制造商數(shù)據(jù)newGoodsList: [], // 周一周四新品首發(fā)數(shù)據(jù)hotGoodsList:[], // 人氣推薦topicList: [], // 專題精選categoryList: [] //產(chǎn)品列表};},components: {SwiperCom,Grid,Support,Weekproduct,TopicBox,Top,},created() {// 發(fā)送請求，獲取數(shù)據(jù)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" ><h4>{{ item.name }}</h4><p>{{ front_desc }}</p><!-- 產(chǎn)品列表 --><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", // 當(dāng)前類別的idpage: 1, // 當(dāng)前頁數(shù)size: 1000, //每頁顯示條數(shù)brotherCategory: [], // 分類數(shù)組goodsList: [], //當(dāng)前類別對應(yīng)的商品列表front_desc: "",};},created() {this.id_ = this.$route.query.id;this.getCategoryData(); //獲取所有分類數(shù)據(jù)this.getCategoryListData(); //獲取當(dāng)前類別對應(yīng)的產(chǎn)品數(shù)組}, methods: {//獲取所有分類數(shù)據(jù)getCategoryData() {GetCateGoryData({ id: this.id_ }).then((res) => {this.brotherCategory = res.data.brotherCategory; // 全部分類數(shù)組this.currentCategory = res.data.currentCategory; // 當(dāng)前分類對象this.front_desc = this.currentCategory.front_desc; // 當(dāng)前類別文字描述});},//獲取當(dāng)前類別對應(yīng)的產(chǎn)品數(shù)組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 下標(biāo)// name: 分類標(biāo)題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: #666;} } </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=""><h4>{{item.name}}</h4><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"><h4>{{ name }}</h4><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: {// 發(fā)送請求，獲取品牌詳情頁數(shù)據(jù)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. 周一周四新品首發(fā)

<template><div class="week-product"><div class="mytitle"><span></span><h3>{{ title }}</h3></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: #ccc;display: inline-block;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}h3 {width: 30%;background-color: #fff;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"><h3>人氣推薦</h3><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"><h3>{{ title }}</h3><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>

總結(jié)

以上是生活随笔為你收集整理的vue+vant 移动端H5 商城项目_02的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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