标签：仿饿 总结 vue transition js ---- vue2 组件 router
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
本篇文章主要用于记录在学习如何使用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>更多问题参见：最新vue2.x仿饿了么app 商家页面 项目总结_Daisukes的博客-CSDN博客
本项目Git地址：https://gitee.com/ManggoMonster/sell.git
标签：仿饿,总结,vue,transition,js,----,vue2,组件,router 来源： https://blog.csdn.net/lijongsuk/article/details/120799391
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。