仿饿了么app vue2.0开发项目汇总

原创 nyy3723 随笔 框架 701阅读 2018-03-21 14:52:28 举报

项目链接 https://github.com/nyy3723/sell

1、使用的技术栈

vue2+vue-cli+vue-router+stylus+axios+es6

2、实现的功能

  1. 商品、评价、商家组件的上下滚动
  2. 商品页面左侧菜单和右侧菜单的联动效果
  3. 购物车的增加删除,以及已选择商品列表的展示
  4. 查看商品详情页(父子组件之前的通信)
  5. 页面跳转之前的渐变动画效果
  6. 商家实景图片的左右滑动效果

3、项目结构

1)src目录
1》common文件夹-公共的js/css/stylus文件
2》components文件-各个组件的对应的文件夹 包含对应的vue文件及需要用到的图片
2)static文件
公共的js或者css重置文件-reset.css

4、组件介绍

  1. header 头部组件
  2. goods 商品组件
  3. ratings评价组件
  4. seller商家信息组件
  5. food商品详情组件
  6. cartcontrol 增加删除按钮组件
  7. shopcart 购物车组件
  8. star 星星评分组件
  9. ratingselect 评价过滤组件
  10. split 分割线组件
  11. iconClassMap 商品信息图标组件 比如减、折……

5、开发遇到的问题

1-最新的vue-cli创建的webpack-build文件下没有dev-server.js

之前版本的数据mock是在dev-server.js中进行,新版本后在build--webpack.dev.conf.js中
//1、在请求server后
var appData = require('../data.json')//加载本地数据文件
var seller = appData.seller//获取对应的本地数据
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)//通过路由请求数据
// 2.找到devServer对象,在里面添加
before (app) {
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller
})
}),
app.get('/api/goods', (req, res) => {
res.json({
errno: 0,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0,
data: ratings
})
})
}

2、better-scroll问题

1》元素在使用better-scroll时候的dom标签嵌套,首先有一个大的外围div里面嵌套一个父级div,再开始写自己需要的任何标签,需要两个一个父级做内容框与外围的div做高度对比,项目中因为这个问题,好几次页面内容过多,但是不出现滚动
2》具体使用

  1. 先 npm better-scroll
  2. 页面中引入import BScroll from 'better-scroll'
  3. 给外围div增加属性 ref=‘wrapperdiv’
    4.this.menuScroll =new BScroll(this.$refs.wrapperdiv,{click:true});
    click:true在移动端需要加上去,否则滑动失效,还有获取元素时与vue1也有区别,需要注意!

3、图文字体、公共样式问题

1》把需要用到的字体svg文件通过iconmoon网站生成相应的字体样式文件有font文件夹和icon.css文件
2》base.css--处理设备像素比的一些样式,针对border-1px问题,不同设备像素比,显示的线条粗细不同
3》mixin.css--设置border-1px样式和背景样式

4、sticky-footer布局

特点:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。

5、flex左变固定右边自适应布局

6、背景模糊效果

filter: blur(10px);

7、div消失出现的过渡效果及查看详情页左滑动效果

1》div过渡效果(注意:这个与vue1也有区别【只展示最新的,免得混淆】)

dom结构css样式
需要加动的框放在《transition name=‘fade’》《div class=‘detail’》……里面包裹.deatil{transition: all 0.5s ease } // 进入 离开的样式 &.fade-enter-active, &.fade-leave-active{opacity:1;background:rgba(7,17,27,0.8);&.fade-enter, &.fade-leave-activeopacity: 0

2》div左右滑动切换

dom结构css样式
需要加动的框放在《transition name=‘move’》《div class=‘food’》……里面包裹.food{transition: all 0.2s linear; transform translate3d(0,0,0) }<br> // 进入 离开的样式 <br>&.move-enter-active, &.move-leave-active{transform translate3d(100%,0,0)}

8、vue-router的使用(新版与旧版也有一定的区别)

vue-router中,使用router-link组建完成导航,默认会被渲染成a标签,配合to属性指定链接,并在router-view容器中渲染。如:

对应的index.js代码

9、axios的使用

vue2之后官方推荐使用axiox代替了原来的vue-resource,使用方法也有一定的区别,通过this.$http.get来定义通过vue实例发送get请求,通过then后面的成功回调接受数据,这里是通过模拟数据。<br> 1、首先安装axios npm i axios <br> 2、在main.js中引入

10、组件之间的通信

1、父子组件的通信 <br>

2、子组件向父组件传递数据,需要派发自定义事件,使用$emit,父组件使用v-on接受监听(v-on简写@),在这个项目中,ratingselect作为子组件,ratingselect选择查看好评或差评状态要传递给父组件:使用如下

6、vue-cli项目如何上传到github上

1.先下载git工具,注册github账号
2.创建一个本地项目,在自己本地项目文件中,鼠标右键git bash
3.输入git命令初始化 git init (完成后可以查看隐藏文件会多一个.git文件夹)
4.输入 git add . (添加文件)
5.输入 git commit -m ‘注释内容’
6.登陆github网站,点击选择 New repository
7.然后根据提示 输入repository name ——》输入 description ——》选择pubic——》点击creat repository
8.关联github仓库,复制https地址
9.输入 git remote add origin http地址
10.弹出对话框输入自己的github账号和密码
11.输入 git -u origin master
12.关联成功,在github仓库刷新即可看到自己上传的代码
也可以参考 链接标题

7、总结

这个项目断断续续时间花了两周,整个最大的感触就是几乎全部是操作数据,跟之前的jq操作dom完全不一样,vue里面整个就是控制数据,然后判断对应的class的显示与隐藏,这个项目路由什么的也都很基础,所以还没有用到vuex状态管理。后续再做个项目应该会用到了,目前在商品评价这一块点击全部或者推荐那些控制台会出现警示,但是不影响效果,应该是改变父组件时候数据双向绑定的问题,网上找的方法试过了,也没有生效,如果可以,希望有大神提示下,谢谢!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复