美文网首页让前端飞一起来看vue3前端开发那些事儿
【vue3.0】25.0 某东到家（ 廿五）——真机调试

【vue3.0】25.0 某东到家（ 廿五）——真机调试

作者: bobokaka | 来源:发表于2021-12-03 22:13 被阅读0次
真机联调方式

一种方式是手机和电脑连同一个局域网，也就是同一个WiFi
运行项目会在终端显示ip连接的地址：


image.png

因为目前我的是手机热点，需下面的方式：
如果是手机开热点给电脑用，可以win+R键输入ipconfig查询本机ip，然后在手机浏览器上直接打开ip:8080即可

image.png
比如我的就是需要访问192.168.24.113::8080
image.png
image.png
image.png
image.png
image.png
image.png
这里可以看到购物车的加减号有点问题。
首先需要准备2个图标：
image.png
调整src\views\shop\Content.vue 
<template>
  <div class="content">
    <div class="category">
      <div
        :class="{
          category__item: true,
          'category__item--active': currentTab === item.tab
        }"
        v-for="item in categories"
        :key="item.tab"
        @click="handleTabClick(item.tab)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="product">
      <div class="product__item" v-for="item in list" :key="item._id">
        <img class="product__item__img" :src="item.imgUrl" />
        <div class="product__item__detail">
          <h4 class="product__item__title">{{ item.name }}</h4>
          <p class="product__item__sales">月售{{ item.sales }}件</p>
          <p class="product__item__price">
            <span class="product__item__yen"> &yen;{{ item.price }} </span>
            <span class="product__item__origin"> &yen;{{ item.oldPrice }} </span>
          </p>
        </div>
        <div class="product__number">
          <span
            class="product__number__minus"
            @click="
              () => {
                changeCartItem(shopId, item._id, item, -1, shopName)
              }
            "
            ><i class="custom-icon custom-icon-reduce"></i
          ></span>
          {{ getProductCartCount(shopId, item._id) }}
          <span
            class="product__number__plus"
            @click="
              () => {
                changeCartItem(shopId, item._id, item, 1, shopName)
              }
            "
            ><i class="custom-icon custom-icon-add"></i
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
......
</script>

<style lang="scss" scoped>
  @import '@/style/viriables.scss';
  @import '@/style/mixins.scss';
  .content {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 1.6rem;
    bottom: 0.5rem;
  }
  .category {
    overflow-y: scroll;
    width: 0.76rem;
    background: $search-bg-color;
    height: 100%;
    &__item {
      line-height: 0.4rem;
      text-align: center;
      font-size: 0.14rem;
      color: $content-font-color;
      &--active {
        background: $bg-color;
      }
    }
  }
  .product {
    overflow-y: scroll;
    flex: 1;
    &__item {
      position: relative;
      display: flex;
      padding: 0.12rem 0.16rem;
      margin: 0 0.16rem;
      border-bottom: 0.01rem solid $content-bg-color;
      // 配合解决超出长度以省略号显示而不会出现换行
      &__detail {
        overflow: hidden;
      }
      &__img {
        width: 0.68rem;
        height: 0.68rem;
        margin-right: 0.16rem;
      }
      &__title {
        margin: 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $content-font-color;
        // 超出长度以省略号显示而不会出现换行
        @include ellipsis;
      }
      &__sales {
        margin: 0.06rem 0;
        line-height: 0.16rem;
        font-size: 0.12rem;
        color: $content-font-color;
      }
      &__price {
        margin: 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $height-light-font-color;
      }
      &__yen {
        font-size: 0.12rem;
      }
      &__origin {
        margin-left: 0.06rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: $light-font-color;
        text-decoration: line-through; //中划线
      }
      // 购物车选购数量和加减号
      .product__number {
        position: absolute;
        right: 0rem;
        bottom: 0.12rem;
        line-height: 0.18rem;
        // 边框白色
        &__minus {
          position: relative;
          top: 0.01rem;
          color: $medium-font-color;
          margin-right: 0.05rem;
        }
        //无边框，背景蓝色
        &__plus {
          position: relative;
          top: 0.01rem;
          color: $btn-bg-color;
          margin-left: 0.05rem;
        }
      }
    }
  }
</style>

调整src\views\shop\Cart.vue

<template>
  <!-- 蒙层 -->
  <div class="mask" v-if="showCart && calculations.total > 0" @click="handleCartShowChange"></div>
  <div class="cart">
    <div class="product" v-show="showCart && calculations.total > 0">
      <div class="product__header">
        <div class="product__header__all" @click="setCartItemsChecked(shopId)">
          <i
            :class="[
              'product__header__all__icon',
              'custom-icon',
              calculations.isAllChecked
                ? 'custom-icon-radio-checked'
                : 'custom-icon-radio-unchecked'
            ]"
          ></i>
          <span class="product__header__all__text">全选</span>
        </div>
        <div class="product__header__clear">
          <span class="product__header__clear__btn" @click="cleanCartProducts(shopId)"
            >清空购物车</span
          >
        </div>
      </div>
      <div class="product__item" v-for="item in productList" :key="item._id">
        <div class="product__item__checked" @click="changeCartItemChecked(shopId, item._id)">
          <i
            :class="[
              'custom-icon',
              item.checked == true ? 'custom-icon-radio-checked' : 'custom-icon-radio-unchecked'
            ]"
          ></i>
        </div>
        <img class="product__item__img" :src="item.imgUrl" />
        <div class="product__item__detail">
          <h4 class="product__item__title">{{ item.name }}</h4>
          <p class="product__item__price">
            <span class="product__item__yen"> &yen;{{ item.price }} </span>
            <span class="product__item__origin"> &yen;{{ item.oldPrice }} </span>
          </p>
        </div>
        <div class="product__number">
          <span
            class="product__number__minus"
            @click="
              () => {
                0
                changeCartItemInfo(shopId, item._id, item, -1)
              }
            "
            ><i class="custom-icon custom-icon-reduce"></i
          ></span>
          {{ getProductCartCount(shopId, item._id) }}
          <span
            class="product__number__plus"
            @click="
              () => {
                changeCartItemInfo(shopId, item._id, item, 1)
              }
            "
            ><i class="custom-icon custom-icon-add"></i
          ></span>
        </div>
      </div>
    </div>
    <div class="check">
      <div class="check__icon" @click="handleCartShowChange">
        <img src="/i18n/9_16/img/basket.png" alt="" class="check__icon__img" />
        <div class="check__icon__tag">
          {{ calculations.total }}
        </div>
      </div>
      <div class="check__info">
        总计：<span class="check__info__price">&yen; {{ calculations.totalPrice }}</span>
      </div>
      <div class="check__btn" v-show="calculations.totalPrice > 0">
        <router-link :to="{ path: `/orderConfirmation/${shopId}` }"> 去结算 </router-link>
      </div>
    </div>
  </div>
</template>

<script>
......
</script>
<style lang="scss" scoped>
  @import '@/style/viriables.scss';
  @import '@/style/mixins.scss';
  .mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }
  .cart {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: $bg-color;
  }
  .product {
    overflow-y: scroll;
    flex: 1;
    background: $bg-color;
    &__header {
      display: flex;
      line-height: 0.52rem;
      border-bottom: 0.01rem solid $content-bg-color;
      font-size: 0.14rem;
      color: $content-font-color;
      &__all {
        width: 0.64rem;
        margin-left: 0.18rem;
        &__icon {
          display: inline-block;
          vertical-align: top;
          font-size: 0.2rem;
          margin-right: 0.05rem;
          color: $btn-bg-color;
        }
        &__text {
          display: inline-block;
          margin-left: 0.04rem;
          line-height: 0.52rem;
        }
      }
      &__clear {
        flex: 1;
        text-align: right;
        margin-right: 0.16rem;
        &__btn {
          display: inline-block;
        }
      }
    }
    &__item {
      position: relative;
      display: flex;
      padding: 0.12rem 0.16rem;
      margin: 0 0.16rem;
      border-bottom: 0.01rem solid $content-bg-color;
      &__checked {
        line-height: 0.5rem;
        margin-right: 0.2rem;
        color: $btn-bg-color;
        i {
          font-size: 0.25rem;
        }
      }
      // 配合解决超出长度以省略号显示而不会出现换行
      &__detail {
        overflow: hidden;
      }
      &__img {
        width: 0.46rem;
        height: 0.46rem;
        margin-right: 0.16rem;
      }
      &__title {
        margin: 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $content-font-color;
        // 超出长度以省略号显示而不会出现换行
        @include ellipsis;
      }
      &__price {
        margin: 0.06rem 0 0 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $height-light-font-color;
      }
      &__yen {
        font-size: 0.12rem;
      }
      &__origin {
        margin-left: 0.06rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: $light-font-color;
        text-decoration: line-through; //中划线
      }
      // 购物车选购数量和加减号
      .product__number {
        position: absolute;
        right: 0rem;
        line-height: 0.18rem;
        bottom: 0.26rem;
        // 边框白色
        &__minus {
          position: relative;
          top: 0.01rem;
          color: $medium-font-color;
          margin-right: 0.05rem;
        }
        //无边框，背景蓝色
        &__plus {
          position: relative;
          top: 0.01rem;
          color: $btn-bg-color;
          margin-left: 0.05rem;
        }
      }
    }
  }
  .check {
    display: flex;
    box-sizing: border-box; //往内塞入border
    line-height: 0.49rem;
    height: 0.49rem;
    border-top: 0.01rem solid $content-bg-color;
    &__icon {
      width: 0.84rem;
      position: relative;
      &__img {
        margin: 0.12rem auto;
        display: block;
        width: 0.28rem;
        height: 0.28rem;
      }
      &__tag {
        // 乘以2然后等比例缩小
        position: absolute;
        left: 0.46rem;
        top: 0.04rem;
        padding: 0 0.04rem;
        min-width: 0.2rem;
        height: 0.2rem;
        line-height: 0.2rem;
        text-align: center;
        background-color: $height-light-font-color;
        border-radius: 0.1rem;
        font-size: 0.12rem;
        color: $bg-color;
        transform: scale(0.5);
        transform-origin: left center;
      }
    }
    &__info {
      flex: 1;
      color: $content-font-color;
      font-size: 0.12rem;
      &__price {
        line-height: 0.49rem;
        color: $height-light-font-color;
        font-size: 0.18rem;
      }
    }
    &__btn {
      width: 0.98rem;
      background-color: #4fb0f9;
      text-align: center;
      color: $bg-color;
      font-size: 0.14rem;
      // 去掉a标签的下划线
      a {
        color: $bg-color;
        text-decoration: none; //去掉文本修饰
      }
    }
  }
</style>

修改src\views\orderConfirmation\TopArea.vue

......
<style lang="scss" scoped>
  @import '@/style/viriables.scss';

  .top {
    position: relative;
    height: 1.96rem;
    background-size: 100% 1.59rem;
    /* 渐变轴为0度,相当于从下到上，
   高度4%位置从rgba(0, 145, 255, 0) 开始渐变
   到高度50%位置的蓝色（#0091ff）结束 */
    background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, $btn-bg-color 50%);
    background-repeat: no-repeat;

    &__header {
      position: relative;
      padding-top: 0.26rem;
      line-height: 0.24rem;
      color: $bg-color;
      text-align: center;
      font-size: 0.16rem;
      &__back {
        position: absolute;
        font-size: 0.22rem;
        left: 0.18rem;
      }
    }
    &__receiver {
      position: absolute;
      left: 0.18rem;
      right: 0.18rem;
      bottom: 0rem;
      height: 1.11rem;
      background: $bg-color;
      border-radius: 0.04rem;
      &__title {
        line-height: 0.22rem;
        padding: 0.16rem 0 0.14rem 0.16rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__address {
        line-height: 0.2rem;
        padding: 0 0.4rem 0 0.16rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__info {
        padding: 0.06rem 0 0 0.16rem;
        &__name &__phone {
          margin-right: 0.1rem;
          line-height: 0.18rem;
          font-size: 0.12rem;
          color: $content-font-color;
        }
      }
      &__icon {
        //旋转180度
        transform: rotate(180deg);
        position: absolute;
        right: 0.16rem;
        top: 0.53rem;
        font-size: 0.16rem;
        color: $medium-font-color;
      }
    }
  }
</style>

相关文章

网友评论

    本文标题：【vue3.0】25.0 某东到家（ 廿五）——真机调试

    本文链接：https://www.haomeiwen.com/subject/aiopxrtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    让前端飞

    一起来看vue3

    前端开发那些事儿

    关于我们|服务条款|联系我们|【vue3.0】25.0 某东到家（ 廿五）——真机调试|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！