精华内容
下载资源
问答
  • 本项目是前端饿了么实战项目实战源码,适合前端基础学习和练习。几乎还原真实的商城,基本涵盖所有的页面和动画。简单易懂,适合有一定的javascript和vue基础小伙伴学习。
  • vue饿了么app项目实战视频
  • 本教程是关于Vue学习与饿了么实战,可以学习到Vue以及饿了么
  • 高仿Vue饿了么 实战开发

    千次阅读 2017-08-02 12:41:20
    简介这次我们使用 Vue 来完整的开发一个 App,下面展示了我们开发了一个 Web App 的全流程,从而让你真正的了解一个项目从零到一的过程:同时我们会以线上开发环境的要求来完成这次的开发任务,让你真正的了解一些...

    简介

    这里写图片描述

    这次我们使用 Vue 来完整的开发一个 App,下面展示了我们开发了一个 Web App 的全流程,从而让你真正的了解一个项目从零到一的过程:

    这里写图片描述

    同时我们会以线上开发环境的要求来完成这次的开发任务,让你真正的了解一些互联网公司是如何开发前端项目的:

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    Vue 介绍

    前端开发趋势

    1.旧浏览器逐渐淘汰,移动端需求增加
    2.前端交互越来越多,功能越来越复杂
    3.架构从传统后台 MVC 向 REST API+ 前端 MV* 迁移

    什么是 MVVM 框架?

    这里写图片描述

    这里写图片描述

    什么是 Vue ?

    这里写图片描述

    如何做技术选型?

    这里写图片描述

    Vue 核心思想

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    Vue cli

    Vue cli 介绍

    Vue cli 是 Vue 的脚手架工具, 用来帮助我们编写好基础的代码。

    这里写图片描述

    展开全文
  • 基于 vue vue-router vue-resource es6 stylus webpack 高仿饿了么外卖App商家详情
  • Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。 new Vue({ router, render: h => h(App) }).$mount("#app"); ` `new Vue({ el: '#...

    一、$mount()手动挂载

    当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。

    new Vue({
       router,
       render: h => h(App)
     }).$mount("#app");
    `
    `new Vue({
      el: '#app',
      router,
      render: h => h(App) 
    });

    解释: render: x => x(App)

       这里的render: x =>x(App)是es6的写法
         转换过来就是:暂且可理解为是渲染App组件
         render:(function(x){
              return x(App);
          });

    二、mock数据

    如果后端接口尚未开发完成,前端开发一般使用mock数据。
    注意:新版的vue-cli 自动搭建的build 文件里没有dev-server.js 和 dev-client.js ,因此我们要在webpack.dev.conf.js 里配置
    配置如下:
    (1)复制data.json 到该项目下
    (2)找到bulid目录下 webpack.dev.conf.js 找到 const portfinder = require('portfinder'),在其下添加mock 数据

    // 添加mock 数据
    const express = require('express')
    const app = express()
    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)

    (3)接着找到 devServer 里的 watchOptions,其后紧跟

    watchOptions: {
          poll: config.dev.poll,
        },
        before(app) {
          app.get('/api/seller', (req, res) => {
            res.json({
              errno: 0,
              data: seller
            })//接口返回json数据,上面配置的数据appData就赋值给data请求后调用
          }),
          app.get('/api/goods', (req, res) => {
            res.json({
              errno: 0,
              data: goods
            })
          }),
          app.get('/api/ratings', (req, res) => {
            res.json({
              errno: 0,
              data: ratings
            })
          })
        }

    (4)设置保存后 npm run dev 运行 访问http://localhost:8080/api/seller 就可接收到 该路由对应的json 数据

    三、关于路由 vue-router

    * 直接定义路由

    (1)首先定义路由

    //  定义路由组件
    	const goods = { template: '<p>我是对应的goods下面的内容</p>' };
    	const seller = { template: '<p>我是对应的seller下面的内容</p>' };

    (2)创建路由实例

    // 创建路由实例
    	var router = new VueRouter({
              routes:[
                //  路由重定向即设置默认路由  
                {path:'/',redirect:'/goods',component:goods}, 
                {path:'/goods',component:goods},
                {path:'/seller',component:seller}
              ]
          });

    路由实例方法:

    router.push({path:'goods'});  //直接添加一个路由,表现切换路由,本质往历史记录里面添加一个
    router.replace({path:'goods'}) //替换路由,不会往历史记录里面添加
    // router.go('goods')

    (3)创建vue 实例

    //  创建 vue 实例
    	const app=new Vue({
    		el:"#app",  //  挂载元素
    		router
    	})

    (4)DOM 渲染
    <body>
     <div id="app">
      <div class="nav">
       <router-link to='/goods'>good</router-link>
       <router-link to='/seller'>seller</router-link>
      </div>
      <div class="content">
       <router-view></router-view>
      </div>
     </div>
    </body>
    注意:

    查看效果时,发现动态的给当前路由 添加le一个router-link-active的类名,所以如果需要设置当前路由样式(比如:高亮)就可以直接在style里设置了

    * (main.js)引入路由组件

    (1)引入路由文件

    import goods from './components/goods/goods'
    import ratings from './components/ratings/ratings'
    import seller from './components/seller/seller'

    (2)创建路由实例 定义路由组件

    const router = new VueRouter({
      routes: [{
        path: '/',
        component: goods
      },{
        path: '/goods',
        component: goods
      }, {
        path: '/ratings',
        component: ratings
      }, {
        path: '/seller',
        component: seller
      }],
      linkActiveClass: 'active' //  将 router-link-active  改为 active(方便样式操作)
    })

    (3)创建vue实例并挂载

    new Vue({
      el:"#app",
      router,
      template: '<App/>',
      components: {
        App
      }
    })

    四、axios 请求数据

    (1)安装 axios
    npm install axios
    (2)引入axios组件

    import axios from 'axios'

    (3)axios 请求数据(在此之前创建一个接受数据的对sellerobj)

    export default {
     //  获取数据 准备  返回一个对象,后台获取数据后 赋予 该对象
       data (){
       	 return {
       	 	 sellerobj:{}
       	 }
       },
       created (){ //  创建之前 请求数据
       	 axios.get('static/data.json').then((result) => {
       	  	 console.log(result) //  控制台检查  数据存储在  result.data 里  
       	  	this.sellerobj = result.data.seller //  将数据存到sellerobj里  	 	
       	  })
       }
    }

    原文发布时间为:2018年01月19日
    原文作者:前端喵 

    本文来源:开源中国 如需转载请联系原作者





    展开全文
  • 一、vue版本2.9.6

    饿了么商家点餐页面Vue实战项目:
    主要知识点总结:
    Vue.js
    Vue-cli
    Vue-resource
    Vue-router
    better-scroll
    webpack官网(http://webpack.github.io/)
    stylus中文文档
    es6入门学习(http://es6.ruanyifeng.com/)
    eslint规则
    设备像素比
    flex布局
    贝赛尔曲线测试

    主要遇到的问题:
    vue2.x与视频中vue1.x的改动地方:
    1、transition不是在元素标签上设置,而是用标签将需要过渡的内容包裹在其中;
    2、子组件创建事件向父组件传递参数:dispatch()更改为emit();
    3、v-el 弃用,改为ref属性为元素或组件添加标记,通过$refs获取;
    4、eslint中代码规范v-for的key值必须添加。
    ……

    项目源码地址:https://github.com/ZZTerry/frontend.learn.project

    展开全文
  • https://blog.csdn.net/qq_14863671/article/details/54412254我的博客的配套代码
  • vue实战:vue.js高仿饿了么webapp

    千次阅读 2018-03-01 23:00:03
    学习了下mook的前端实战教程,花了几天时间看视频加上自己慢慢摸索,基本实现了全部的功能,因为教程中用的是vue1.0,而现在已经是2.0的版本,再加上2.0和1.0的差别还挺多的,所以很多地方也都是自己慢慢摸索出来了...

    学习了下mook的前端实战教程,花了几天时间看视频加上自己慢慢摸索,基本实现了全部的功能,因为教程中用的是vue1.0,而现在已经是2.0的版本,再加上2.0和1.0的差别还挺多的,所以很多地方也都是自己慢慢摸索出来了。附上源码:

    github地址

    展开全文
  • vuejs高仿饿了么app,十二章全,仅供学习,不得用于其他用途
  • 本系列课程是继饿了么订餐app1和2继续开发的课程, 主要讲解的核心功能包含商品列表, 商品详情以及购物车.
  • 本系列课程是继续饿了么3之后继续开发的, 实现了微信支付 项目打包 以及服务器部署, 以及前端微信支付流程, 还有后端微信支付流程的内容.
  • vue2.0 项目实战 饿了么APP,特别适合毕业设计、实习项目、学习检验,价值1999元免费赠送
  • 一、创建food.vue,作为商品详情页面组件,在goods.vue(商品列表)页面引用。点击具体商品跳转到商品详情页。 food.vue的html代码如下: <template> <transition name="move"> <div v-show=...
  • (楞头萌新拨通饿了么订餐电话)嘟...嘟...嘟...您好,这里是饿了么点餐平台请问您需要什么点餐服务?你好,我要一份饿了么您需要什么?~我要一份饿了么饿了么的商家餐品有...
  • vue实战总结

    万次阅读 多人点赞 2017-01-13 21:47:03
    用了十多天看完一份vue实战视频,实现了一个仿饿了么外卖APP。 部分总结以及部分实现如下: App.vue 1.App.vue在HTML中使用router-link标签来导航,默认被渲染成一个a标签,通过传入to属性指定链接; &...
  • 饿了么实战(一)

    2018-07-15 23:21:29
    最近在学习VUE,选择慕课网饿了么实战来学习怎么运用,因为视频中使用的是vue1.0+版本,而我使用的是2.0所以出现有些差异性的东西1、mock数据写在webpack.dev.conf.js中,在文件公共区域写下以下代码在devServer中写...
  • vue饿了么app.txt

    2019-06-15 14:12:29
    vue饿了么app项目实战视频,里面会有vue-cli和webpack打包,还有设备像素比和flex布局讲解
  • 具体问题描述: 手机端当右边商品滚动到对应最后一个菜单“特色粥品”(超出屏幕长度隐藏的菜单),左边对应菜单栏仍隐藏不可见。如下图: 解决办法: ...商品页面goods.vue代码: <template> <div
  • Weex 技术在饿了么前端的实战经验

    千次阅读 2018-04-12 10:41:52
    Weex 平台的轻量、列表渲染的性能、页面的更新策略,以及与 Vue 生态的结合,可以为业务带来不错的使用体验和开发体验。 本场Chat中,我们会结合饿了么的开发经验讨论 Weex 的学习门槛,开发体验等情况。你会了解到 ...
  • Vue2饿了么

    千次阅读 2017-06-28 08:55:29
    初学vue时曾在网上搜索vue实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目,交互没有预期那么复杂。但我们实际在工作中,经常会遇到有...
  • 本项目是基于vue2实战项目,vue2 vue-router2 es6 webpack 高仿饿了么app
  • 注意:新版的vue-cli 自动搭建的build 文件里没有dev-server.js 和 dev-client.js ,因此我们要在webpack.dev.conf.js 里配置 复制data.json 到src/static/该项目下 找到bulid目录下 webpack.dev.conf.js 找到 const...
  • 该系列课程是饿了么系列课程的第二部分, 主要实现的功能是首页内容, 商家排序, 商家筛选, 下拉刷新上拉加载, 搜索商家商品名称等功能
  • 5-3 组件拆分(配置header组件) 问题:使用stylus时报错   解决方法:依次npm安装npm install stylus-loader.还需要npm install stylus  
  • 【慕课网实战课程笔记】Vue.js高仿饿了么外卖App 该课程为慕课网付费课程,笔记内容代码居多、内容简略,仅供自己日后翻阅。如有疑问或者不妥,欢迎提出指正,我看到了会回复,谢谢!
  • MVVM框架:针对具有复杂交互...vue.js:是一个轻量级的MVVM的框架,数据驱动+ 组件化的前端开发与Angular React 对比:Vue.js更轻量,gzip后大小只有20k;Vue.js更易于上手;吸收了Angular的指令和react的组件化。V...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 158
精华内容 63
关键字:

饿了么vue实战

vue 订阅