vue2.x仿饿了么项目总结

2023-11-16 13:38:16

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

一、项目框架

二、开发问题汇总

1. 实现进入页面固定为商品页

2. router定义方式

3. transition动画

前言

本篇文章主要用于记录在学习如何使用vue2.x仿写饿了么项目过程中遇到的一些问题以及技术。

本项目采用ES6语法编写，其中关键框架和依赖包括：vue、vue-resource、vue-router、better-scroll、stylus、webpck、node.js（v14.16.1）等，以下是使用的各依赖的版本：

    "vue": "^2.5.2",
    "vue-resource": "^1.5.3",
    "vue-router": "^2.2.0",
    "better-scroll": "^2.4.2"

一、项目框架

common/---- 文件夹存放的是通用的stylus,js和fonts
components/----文件夹用来存放我们的 Vue 组件
router/----文件夹存放的是vue-router相关配置（linkActiveClass,routes注册组件路由）
App.vue----根组件，所有的子组件都将在这里被引用
index.html----整个项目的入口文件，将会引用我们的根组件 App.vue
main.js----入口文件的 js 逻辑，在 webpack 打包之后将被注入到 index.html 中

为方便各模块的复用，减少冗余，项目被拆分成组件编写，各组件关系大致如下图所示：

二、开发问题汇总

1. 实现进入页面固定为商品页

教程中在main.js中调用router.go('/goods')，但是经过实践发现并无效果，后改为在App.vue的create方法中调用以下语句成功。

this.$router.push('/goods')

2. router定义方式

const routes = [
  // {redirect: '/goods'},
  {path: '/goods', component: goods},
  {path: '/ratings', component: ratings},
  {path: '/seller', component: seller}
]

3. transition动画

transition动画,vue1.x中transition为加在标签内的属性，vue2.x中transition为一个独立标签，需要将要使用动画的部分包装好，即transition标签只能包裹一个div或其他标签，且动画样式类也发生了改变。

.fade-enter, .fade-leave-to
    opacity 0
  .fade-enter-active, .fade-leave-active
    transition opacity 0.5s
  .detail
    position fixed
......

<transition name="fade">
      <div class="detail" v-show="detailShow">
        <div class="detail-wrapper clearfix">
          <div class="detail-main">
            <h1 class="detail-name">{{seller.name}}</h1>
            <div class="star-wrapper">
              <star :size="48" :score="seller.score"></star>
            </div>    
        </div>
      </div>
</transition>

本项目Git地址：https://gitee.com/ManggoMonster/sell.git

码农公寓

文章目录​​​​

前言