Giter Club home page Giter Club logo

vue-sell's Introduction

vue-sell

Vue.js 高仿饿了么外卖 App 课程源码,课程地址: http://coding.imooc.com/class/74.html

本源码基于 GPL 协议,仅仅用于 Vue 实战项目的学习,不可作为商业用途。 我们抵制和鄙视一切盗版侵权行为,请尊重作者的劳动果实!

项目演示地址

二维码

你可以学到什么

我们可以通过一张图来认识一下本课程的知识结构

vue-sell

如何学习

请从正规渠道购买本课程的教学视频: http://coding.imooc.com/class/74.html。 你还可以加入课程讨论群,与同学一起讨论问题,还可以得到我的亲自指导。

适合人群

适合有一定 Vue.js 和前端基础知识并且想深入学习 Vue.js 并运用在实战项目的同学。

TODO

由于本课程录制时间较早,编写代码的时候 Vue.js 2.0 还未正式发布,所以源码采用 1.0 编写,后续会更新到 2.0 版本。

master 代码已经升级到最新 Vue.js 2.1.10 版本,如果想查看 1.0 版本的代码可以切换到 1.0 的代码分支。

next 分支已经基于 Vue.js 2.5.x + cube-ui + vue-cli 3.0 重构。

Vue.js 进阶

如果想在 Vue.js 的方向进阶,学习更加复杂的项目开发的同学。可以关注我的新课程:http://coding.imooc.com/class/107.html

项目演示地址

二维码

vue-sell's People

Contributors

contra999 avatar junx123 avatar ustbhuangyi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-sell's Issues

npm install

黄老师,你好。
我在学习的过程中重新安装依赖时,总是报错:
this dependency was not found
evensource-polyfill in ./build/dev-client.js
但我安装完毕后,npm run dev还是有这个问题
同时还报错:
these relative modules were not found
./src/main.js in multi app
./../._webpack@1.15.0@webpack/buildin/module.js in ./~._webpack-hot-middleware@2.21.0@wenpack-hot-middleware/client.js?noInfo=true&reload=true

async props at version 2.42

app.vue异步获取数据赋回给seller,header组件接收时这段代码会报错

<div class="supports">
      <span class="supports-icon" :class="classMap[seller.supports[0].type]"></span>
      <span class="supports-txt">{{seller.supports[0].description}}</span>
</div>

// vue.esm.js?63b1:476 [Vue warn]: Error in render function: "TypeError: Cannot read property '0' of undefined"
解决1:异步获取数据后将flag置为true,子组件再渲染
app.vue

 data () {
    return {
        data () {
           seller: {
                flag:  false
            }
        }
    }
  },

header.vue

<template>
     <div v-if="seller.flag"></div>
</template>

解决2:watch数据再执行回调函数

end

关于webpack部署上线的问题

老师 我一直有一个疑问 既然是mock的数据 也是借助了node的express中间件完成的页面 那么这个npm run build 如何打包部署在服务器上呢 对服务器的要求是什么呢? 希望老师能够解疑 谢谢老师

github pages显示问题

传到github上,访问的数据都报错404,这个怎么解决,不知道怎么重改路由

stylus 全局导入后,为何还要在App.vue 中再次导入?

common/index.styl
@import './base'
@import './icon'
@import './mixin'
此文件配置了需要全局导入的styl文件

main.js
......
import "@/common/stylus/index.styl";
......

main.js中全局导入

问题:
在App.vue中,为何还要再次导入?
.....
@import "common/stylus/mixin.styl"
....

否则以下代码会报错,但是别的样式却可以正常使用。
border-1px(rgba(7, 17, 27,0.1))

�测试了很多次依然无效,请问有什么办法可以全局一次性导入吗?

router-view 的不理解处

1 router-view是一个组件,为什么不在component选项中注册就能有作用呢?其他的header组件必须注册后才能在template中使用...

路由取不到是什么情况

import goods from'components/goods/goods';这样写报错
加上'./'后,不报错,但是点击没有反应
import goods from'./components/goods/goods';

两个交互问题

大神,研究了下你的demo,有两个小问题。
1、当“特色粥品”,也就是最后一类菜只有一个菜品的时候,点击这个分类,不会有点击后效果。
2、滚动菜品,分类不会同步滚动。就是当分类很多,有些分类需要滚动才能看到时,如果你滚动右边的菜品,滚动到遮住的分类时,分类不会自动滚动到可视区。

_followScroll内找不到this.meunScroll

黄老师您看看在_followScroll内找不到this.meunScroll 还有better-scroll的问题 发现better-scroll的文档里面没有设置回弹距离的属性 在用力拖动左边的分类列表时 左侧分类列表的click事件是失效的 都700ms后 也就是滚动条恢复的时候click才会生效 两个问题困扰不已 忘解答

foodlist页面长按拖动的问题

foodlist商品栏 better-scroll 插件 probeType: 3 设置为3长按拖动会出现卡屏 设置为1的话 画面顺畅 但是左边的menulist点击和匹配foodlist页面的item栏的时候 背景白色出现会有问题. ios的卡屏现象严重一点, 安卓的稍微好点

当路由切换时,如果滑动未结束,会持续触发scroll事件.

image

当在商家页滑动商品,在未完成滑动动画时,点击评论后,页面切换了,但会持续触发scroll事件
gaa

不仅仅在vue中有个这个问题(开始我猜是keepalive的缘故),但在react中也有类似的问题,在react的组件中我尝试在componentWillUnmount中将这个betterScroll实例销毁,但依然不起效果.

..尽管整个DOM树已经消失了,但还是不断的触发scroll事件.故我猜是better-scroll中监听的scroll事件的判断似乎有问题..

此问题移至Better-Scroll中的issue

less mixin bg-image problem

less syntax

.bg-image('./img/brand'); //error This relative module was not found:* ../../../static/css/img/[email protected] 

mixin.less

.bg-image (@url) {
  background-image: url("@{url}@2x.png");
}

image
i modify the path

.bg-image('../../src/components/header/img/brand');// success

the forum answer can slove this problem ,but why

.bg-image('./img/brand');// success

mixin.less

.bg-image (@url) {
  background-image: ~"url(@{url}@2x.png)";
}

mixin文件引入问题

  • index.style 中引入了 mixin.styl 为什么在每个组件中还需要再引入一次?
  • 全局引入了 index.styl 不就意味着已经引入了 mixin 中的代码了吗?
  • 我把组件单独引入的 mixin 注释掉就会报错,这是为什么?

我上面的理解是不是哪里错了?还请老师答复

关于better-scroll使用Cannot read property 'on' of undefined

Uncaught (in promise) TypeError: Cannot read property 'on' of undefined
at VueComponent._initScroll (eval at (app.js:750), :65:20)
at VueComponent.eval [as _initScroll] (eval at (app.js:594), :216:72)
at VueComponent.eval (eval at (app.js:750), :49:12)
at Array.func (eval at (app.js:594), :491:10)
at nextTickHandler (eval at (app.js:594), :447:16)

在使用better-scroll的时候,出现这个错误。请问老师这个是怎么解决的呢?
报错的是这一行。
this.foodScroll = new BScroll(this.$els.foodsWrapper, {
probeType: 3
});

watch监听不到display:none元素的宽度问题

老师是这样的,遇到了一个实际的问题,就是vue如果父级元素下的子级元素的宽度或者偏移要变化,然后这个值是根据父级宽度计算而来的,然后如果父级被隐藏了,发现就watch不到父级的宽度了,自己的宽度也无法计算到了,在看您的vue-music教程时也发现了同样的问题,就是如果隐藏player会被切换到miniplayer,然后这时候进度条的progress宽度是无法变化的,进度按钮的偏移量也是错误的,您可以试一下您的代码,切换到mini模式然后点暂停然后再点击miniplayer,切换回player全屏,发现按钮的偏移量和宽度都是错误的……已经尝试了很多方法都无法解决,不得已来github上问,求救呜呜呜呜,问题不解决一直肚子痛呜呜呜
image

修复bug

this.scrollY = Math.abs(Math.round(pos.y)) 应该改为 this.scrollY = Math.round(Math.abs(pos.y))

在线预览无法获取data.json模拟的数据

image
/seller 请求
Failed to load resource: the server responded with a status of 404 (Not Found)
status:404
statusText:"Not Found"

源码已经上传了,编译后的dist文件夹里的内容也上传到了gh-pages分支,无法获取到data.json的数据,请问是什么原因呢?

上传github演示问题

准备写进简历里面,因为是node模拟的数据,不知道怎么才能像老师一样,弄的可以直接给别人观看

小球动画的问题

你好,我在研究小球动画源码的时候在想cartcontrolshopcart这两个组件是不是可以理解为是平行组件之前的通信?
既是cartcontrol<div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>传入到shopcart中,可以这样理解吗?

求答疑

在main.js文件中又这么一段代码
new Vue({ el: '#app', router, render: h => h(App) });
其中render: h => h(App)表示什么意思?

怎么生成二维码的?

整个项目都做完以后,build以后怎么可以在线预览(这样就可以利用url生成二维码了),

ratings 界面 better-scroll 没效果

import BScroll from 'better-scroll'
created() {
axios.get('static/data.json').then((res) => {
this.ratings = res.data.ratings;
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.ratings,{
click:true
})
})
});
},

关于打包生产环境,部署到服务器问题

在学习完黄老师的项目,想要打包生产环境,部署到服务器遇到一个问题
问题描述如下:
1.将使用cnpm run build命令产生的dist目录下的文件,以及json数据放到tomcat下目录模拟服务器,浏览器访问相应地址,打开没有相应的数据,也就是ajax请求json数据不成功
2.根目录下有个prod.server.js的文件,这个文件如何使用,在bulid下的配置文件,好像没有它的入口。
image
图片显示,好像请求不到黄老师的ur lhttp://ustbhuangyi.com/sell/api/goods,如何将其修改成自己的url
3.将tomcat目录下的文件,替换成自己仿写生成的dist目录下的文件,截图如下
image
大概是url路径有错,url: "/api/goods",请问如何在代码中修改

手机火狐滚动卡顿

在手机火狐下滚动不流畅,会有一跳一跳的感觉,可能是better-scroll的问题,iscroll表现正常

关于图片的适配

你好,看到这个项目里面img标签里面的图片,都是2x图,请问在iphone 6sp下是不是应该适配3x图,如果是实际项目中,是服务器会根据屏幕的dpr来返回不同尺寸的图片么,还是说2x图就已经足够了?

App.vue-object

this.seller = Object.assign({}, this.seller, response.data);中response.data应该是response.seller吧。。

about :v-model=""

老师,我有如下一段代码
/*******************************************/
<checkbox-group v-for="item in items" :v-model="'attr'+item.id"> <checkbox xxxx> </checkbox-group>

data(return{}) 中也初始化了 attr1=[], attr2=[] ...
/***************************************************/
页面渲染结果为



但是 checkbox 不能点击,点击时checkbox上只增加了is-focus这个类,没有增加is-checked这个类

VueResource 课程中加载seller数据对象错误

this.$http.get('/api/seller?id=' + this.seller.id).then((response) => {
response = response.body;
if (response.errno === ERR_OK) {
this.seller = Object.assign({}, this.seller, response.data);
}
});
response.data 应改为response.seller, 或者调整mock的json数据

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.