提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
本篇文章主要用于记录在学习如何使用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>