公司网站备案选个人,建立个人网站费用,克隆网站后台,小程序开发小程序制作文章目录一、路由规划1. 新建路由配置2. 下载vue-router3. 路由注册4. 路由基础配置5. 路由挂载6. AppTabBar7.二、移动端首页2.1.首页效果2.2. 首页接口请求2.3. 首页页面2.4. 首页页面三、首页组件3.1. 轮播图SwiperCom3.2. Grid 居家-志趣组件3.3. 类别页组件3.4. 品牌制造商…
文章目录一、路由规划1. 新建路由配置2. 下载vue-router3. 路由注册4. 路由基础配置5. 路由挂载6. AppTabBar7.二、移动端首页2.1.首页效果2.2. 首页接口请求2.3. 首页页面2.4. 首页页面三、首页组件3.1. 轮播图SwiperCom3.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移动端UIaxios^0.24.0前后端交互amfe-flexible^2.2.1Rem 布局适配postcss-pxtorem^5.1.1Rem 布局适配less^4.1.2css编译less-loader^5.0.0css编译vue/cli~4.5.0项目脚手架
vue-cli vant less axios 开发
一、路由规划
项目路由规划配置 如果项目中所有的路由都写在入口文件中那么将不便于编写项目和后期维护。因此路由需要进行模块化处理。
1. 新建路由配置
在src目录下创建router目录,该目录下新建index.js 用于 编写路由配置
2. 下载vue-router
npm install vue-router3. 路由注册
在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 router5. 路由挂载
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组件
templatediv classapp-tab-bar!-- 下方导航 --van-tabbarv-modelactiveactive-color#ee0a24inactive-color#000changeonChangeshaperoundroutevan-tabbar-item iconhome-o to/home首页/van-tabbar-itemvan-tabbar-item iconlabel-o to/topic专题/van-tabbar-itemvan-tabbar-item iconapps-o to/category分类/van-tabbar-itemvan-tabbar-item iconshopping-cart-o to/cart购物车/van-tabbar-itemvan-tabbar-item iconuser-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},},
};
/scriptstyle langless scoped/style将AppTabBar.vue导入app.vue 跟组件
templatediv idapp!-- 路由对应的组件存放到router-view中--router-view/router-view!-- 底部tabbar 组件 --AppTabBar v-show$route.meta.isShowTabbar/AppTabBar/div
/templatescript
// 引入底部tabbar 组件
import AppTabBar from ./components/AppTabBar.vue;export default {name: App,components: {AppTabBar,},
};
/scriptstyle langless scoped/style7. 二、移动端首页
2.1.首页效果 首页展示的数据
2.2. 首页接口请求
http.js文件中的接口请求
//1. 首页 Home
// 获取首页数据列表
export function getIndexList() {return instance.get(/index/index)
}2.3. 首页页面
home/home.vue
2.4. 首页页面
templatediv classhome!-- 二级路由坑 --router-view v-if$route.path /home/searchPopup/router-viewmain v-else!--搜索框 --van-searchshaperoundv-modelvalueshow-actionplaceholder请输入搜索关键词searchonSearchcancelonCancelclick$router.push(/home/searchPopup)/!-- 轮播图 --SwiperCom :bannerbanner/SwiperCom!-- grid 居家-志趣组件 --Grid :channelchannel/Grid!-- 品牌制造商直供 --Support :brandListbrandList/Support!-- 周一周四新品首发 --Weekproduct:newGoodsListnewGoodsListtitle周一周四新品首发/Weekproduct!-- 人气推荐 top组件 --!-- v-if 保证了有数据才渲染该组件等渲染该组件的时候才执行该组件的生命周期函数--Top :hotGoodsListhotGoodsList v-ifhotGoodsList.length0/Top!-- 专题精选 --TopicBox :topicListtopicList title专题精选/TopicBox!-- 产品列表 --Weekproductv-foritem in categoryList:keyitem.id:newGoodsListitem.goodsList:titleitem.name/Weekproduct/main/div
/templatescript
// 导入轮播图组件
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() { },},
};
/scriptstyle langless scoped
.home {padding-bottom: 100px;box-sizing: border-box;
}
/style三、首页组件
3.1. 轮播图SwiperCom template!-- 轮播图 --div classswiper-comvan-swipe classmy-swipe :autoplay1000 indicator-colorwhitevan-swipe-item v-foritem in banner :keyitem.id img :srcitem.image_url alt/van-swipe-item/van-swipe/div
/templatescript
export default {name:swiper-com,props:[banner],}
/scriptstyle langless scoped.swiper-com{width: 100%;img{width: 100%;}}
/style3.2. Grid 居家-志趣组件 templatediv classgirdvan-grid :column-num5 channel.lengthvan-grid-itemv-foritem in channel:keyitem.id:iconitem.icon_url:textitem.nameclickbtn(item.id)//van-grid/div
/templatescript
export default {name: gird,props: [channel],methods: {btn(id){this.$router.push({path: /channel, query:{id: id}})}}
};
/scriptstyle
/style3.3. 类别页组件 Channel.vue
templatediv classchannel-boxvan-tabs sticky changechangeFnvan-tab v-foritem in brotherCategory :keyitem.id :titleitem.name h4{{ item.name }}/h4p{{ front_desc }}/p!-- 产品列表 --Products :goodsListgoodsList //van-tab/van-tabs/div
/templatescript
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,},
};
/scriptstyle langless scoped
.channel-box {text-align: center;font-size: 16px;line-height: 40px;p {color: #666;}
}
/style3.4. 品牌制造商直供 templatediv classsupportulli v-foritem in brandList :keyitem.id clickclickFn(item.id)img :srcitem.pic_url alth4{{item.name}}/h4p{{item.floor_price|moneyFlrmat}}/p/li/ul/div
/templatescript
export default {name:support,props:[brandList],methods: {clickFn(id){this.$router.push({path:/brand, query:{id: id}})}}
}
/scriptstyle langless scoped.supportul{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;}}}
/style3.5. 品牌详情页 templatediv classbrand-boxh4{{ name }}/h4img :srclist_pic_url alt /p{{ simple_desc }}/p/div
/templatescript
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})},}
}
/scriptstyle langless scoped
.brand-box {text-align: center;font-size: 16px;line-height: 40px;img {width: 100%;}
}
/style3.6. 周一周四新品首发 templatediv classweek-productdiv classmytitlespan/spanh3{{ title }}/h3/divulli v-foritem in newGoodsList :keyitem.id clickclickFn(item.id)img :srcitem.list_pic_url alt /p{{ item.name }}/pp{{ item.retail_price }}/p/li/ul/div
/templatescript
export default {name: week-product,props: [newGoodsList, title],methods: {clickFn(id) {this.$router.push({ path: /productDetail, query: { id: id } })}}
}
/scriptstyle langless 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;}}}
}
/style3.7. 人气推荐 top组件 templatediv classtop-boxh3人气推荐/h3div classcontent v-foritem in hotGoodsList :keyitem.idvan-card:keyitem.id:priceitem.retail_price:descitem.goods_brief:titleitem.name:thumbitem.list_pic_urlclickclickFn(item.id)//div/div!-- v-foritem in hotGoodsList --
/templatescript
export default {name: top,props: [hotGoodsList],created() {console.log(555, this.hotGoodsList);},methods: {clickFn(id) {this.$router.push({ path: /productDetail, query: { id: id } })}}
}
/scriptstyle langless scoped
.top-box {h3 {font-size: 22px;line-height: 60px;text-align: center;}
}
/style3.8. 专题精选TopicBox templatediv classtopich3{{ title }}/h3van-swipe classmy-swipe :autoplay1000 indicator-colorwhitevan-swipe-itemv-foritem in topicList:keyitem.idimg :srcitem.item_pic_url alt /p{{ item.title }}/pp{{ item.subtitle }}/p/van-swipe-item/van-swipe/div
/templatescript
export default {name: topic,props: [topicList, title],}
/scriptstyle langless 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
