移动端商城项目

这是一个移动端的商城项目 项目中使用到的组件有Vant

里面的模块有首页 详情页 购物车 订单 登录

因为是移动端页面 所以在写之前对他进行了适配 使用了lib-flexible/flexible插件和postcss-pxtorem@5.1.1版本插件

lib-flexible插件会帮font-size写入html里rem依赖于html里的font-size

postcss-pxtorem是我们创建个 postcss.config.js里面配置如下

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      // Vant 官方根字体大小是 37.5px=1rem
      // rootValue:75,

      //如果是 Vant 的样式(vant是按照375px设计稿来的)， rootValue 设置为 37.5px=1rem 来转换 。
      //如果是750px设计稿，rootValue 设置为 75px=1rem 来转换
      //参考文章-https://www.jianshu.com/p/03d2126fc915   vant适配rem
      rootValue({file}) {
             return file.indexOf('vant')!==-1?37.5:75
      },
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

然后就要我们开始写页面 因为底部的tabBar是会被复用的 所以写之前先将NavBar栏写成组件 方便我们复用

首页

轮播图

轮播图是用到了vant中的van-swipe来实现的 然后再通过请求首页数据 拿到轮播图图片进行渲染

商品区域 我们请求来的首页数据中已经将数据分好 我们只需要把对应的数据添加到数组中在页面进行渲染 

  onMounted(async () => {
      const token = getLocal('token')
      if (token) {
        state.isLogin = true
        // 获取购物车数据.
        store.dispatch('updateCart')
      }
      const { data } = await getHome()
      state.swiperList = data.carousels
      state.newGoodses = data.newGoodses
      state.hots = data.hotGoodses
      state.recommends = data.recommendGoodses
      state.loading = false
      Toast.clear()