项目总结

业务总结

01-首页

• mockjs模拟数据+骨架屏+数据懒加载+图片懒加载+轮播图组件

02-分类

• 复选框组件+面包屑组件+无限加载组件

03-商品详情

• 商品图预览组件+SKU组件+数量选择组件+按钮组件

04-购物车

• 本地购物车+服务端购物车

05-结算&支付

• 对话框组件 + 支付宝沙箱支付

06-订单管理

• 标签页组件 + 步骤条组件

VUE 3.0

01-踩过的坑

问题01：currentRoute已经是ref包装的数据类型

/* vue2.0 版本用法 */
router.currentRoute.fullPath

/* vue3.0 版本用法 */
router.currentRoute.value.fullPath

问题02：<style scoped> 中 @keyframes 动画序列 vue-cli 编译后异常 参考issues (opens new window)

编译前代码：

<style scoped lang="less">
.order-list {
  animation: test 4s infinite;
}
@keyframes test {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

编译后代码：

.order-list {
  animation: test-7dc8ef14 4s infinite;
}
@keyframes test-7dc8ef14 {
  0%[7dc8ef14] {
    opacity: 0;
  }
  100%[7dc8ef14] {
    opacity: 1;
  }
}

处理方案：

• 第一种：定义为全局样式，注意序列名称，别被覆盖即可。
• 第二种：安装 @vue/compiler-sfc 为 3.0.1 版本。

问题03： <style scoped vars={color} > 给style传入变量，开发环境好使，生成环境失败。

编译前代码：

<script>
export default {
    setup () {
        const color = ref('#000000')
        return { color }
    }
}
</script>
<style scoped vars={color}>
    .box {
        color: var(--color)
    }
</style>

npm run serve 编译后代码：

element.style {
    --60f10c3c-color: #000000;	
}
.box {
    color: var(--60f10c3c-color)
}

npm run build 编译后代码：

element.style {
    --60f10c3c-color: #000000;	
}
.box {
    color: var(--color)
}

处理方案：

• 第一种：不使用vars新特性，自己通过 :style 绑定样式。
• 第二种：官方最新特性中已经采用 v-bind 在css中使用变量，参考 RFCS (opens new window)

问题4： vue-router-next 中 router-link-active 的追加条件更加苛刻。

vue2.0 中：

// 路由规则
const routes = [
    {'/orders', component: OrderList},
    {'/orders/:id', component: OrderDetail}
]

<template>
<router-link to="/orders">订单列表</router-link>
<router-view></router-view>
</template>

当路由地址是 /orders/10086 的时候 router-link 解析后会追加 router-link-acitve 类名

vue3.0 中：

当路由地址是 /orders/10086 的时候 router-link 解析后不会追加 router-link-acitve 类名

参考 RFCS (opens new window)

02-关注功能

VUE3.0 值的关注的新特性 (opens new window)