-
VUE.js高仿饿了么商城实战项目源码(未打包文件)
2020-11-09 14:12:47本项目是前端饿了么实战项目实战源码,适合前端基础学习和练习。几乎还原真实的商城,基本涵盖所有的页面和动画。简单易懂,适合有一定的javascript和vue基础小伙伴学习。 -
vue饿了么app项目实战视频
2018-07-13 10:45:29vue饿了么app项目实战视频 -
Vue学习与饿了么实战.txt
2019-10-25 10:49:37本教程是关于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实战项目高仿饿了么外卖App商家详情
2019-08-10 09:07:39基于 vue vue-router vue-resource es6 stylus webpack 高仿饿了么外卖App商家详情 -
Vue 实战 饿了么 (一)
2018-07-23 15:44:53当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实战项目)总结
2020-07-24 11:07:30一、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
-
vue2.0仿饿了么实战代码
2018-12-07 14:30:39https://blog.csdn.net/qq_14863671/article/details/54412254我的博客的配套代码 -
vue实战:vue.js高仿饿了么webapp
2018-03-01 23:00:03 -
vue仿饿了么app项目实战.txt
2019-10-29 21:33:51vuejs高仿饿了么app,十二章全,仅供学习,不得用于其他用途 -
Vue实战还原饿了么订餐app(商品列表+详情+购物车)
2020-06-12 16:46:03本系列课程是继饿了么订餐app1和2继续开发的课程, 主要讲解的核心功能包含商品列表, 商品详情以及购物车. -
Vue实战还原饿了么订餐app4(微信支付+打包+服务器部署)
2020-06-12 16:52:17本系列课程是继续饿了么3之后继续开发的, 实现了微信支付 项目打包 以及服务器部署, 以及前端微信支付流程, 还有后端微信支付流程的内容. -
vue2.0 项目实战 饿了么APP
2018-11-17 19:58:55vue2.0 项目实战 饿了么APP,特别适合毕业设计、实习项目、学习检验,价值1999元免费赠送 -
(饿了么商家点餐页面Vue实战项目)Vue2.0商品详情页面 复用 商品列表页面 购物车小球贝塞尔曲线飞入效果
2020-07-12 18:51:02一、创建food.vue,作为商品详情页面组件,在goods.vue(商品列表)页面引用。点击具体商品跳转到商品详情页。 food.vue的html代码如下: <template> <transition name="move"> <div v-show=... -
Vue 实战打造饿了么 Web APP, 技术点太多,标题写不下啊
2019-08-29 18:10:55(楞头萌新拨通饿了么订餐电话)嘟...嘟...嘟...您好,这里是饿了么点餐平台请问您需要什么点餐服务?你好,我要一份饿了么您需要什么?~我要一份饿了么饿了么的商家餐品有... -
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:29vue饿了么app项目实战视频,里面会有vue-cli和webpack打包,还有设备像素比和flex布局讲解 -
(饿了么商家点餐页面Vue实战项目)better scroll实现后发现的问题:手机端右边商品栏滑动到底左边菜单栏...
2020-07-09 15:57:50具体问题描述: 手机端当右边商品滚动到对应最后一个菜单“特色粥品”(超出屏幕长度隐藏的菜单),左边对应菜单栏仍隐藏不可见。如下图: 解决办法: ...商品页面goods.vue代码: <template> <div -
Weex 技术在饿了么前端的实战经验
2018-04-12 10:41:52Weex 平台的轻量、列表渲染的性能、页面的更新策略,以及与 Vue 生态的结合,可以为业务带来不错的使用体验和开发体验。 本场Chat中,我们会结合饿了么的开发经验讨论 Weex 的学习门槛,开发体验等情况。你会了解到 ... -
Vue2饿了么
2017-06-28 08:55:29初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目,交互没有预期那么复杂。但我们实际在工作中,经常会遇到有... -
vue2vuerouter2es6webpack高仿饿了么app
2019-08-12 02:16:08本项目是基于vue2实战项目,vue2 vue-router2 es6 webpack 高仿饿了么app -
Vue2.x实战饿了么项目笔记(一)
2018-11-10 13:19:06注意:新版的vue-cli 自动搭建的build 文件里没有dev-server.js 和 dev-client.js ,因此我们要在webpack.dev.conf.js 里配置 复制data.json 到src/static/该项目下 找到bulid目录下 webpack.dev.conf.js 找到 const... -
VueCli3实战项目-还原饿了么订餐app2(商家排序筛选和搜索)
2020-06-12 16:37:12该系列课程是饿了么系列课程的第二部分, 主要实现的功能是首页内容, 商家排序, 商家筛选, 下拉刷新上拉加载, 搜索商家商品名称等功能 -
慕课网饿了么实战项目容易出错的地方(因为升级了vue2.0所以有很多地方需要改)
2019-01-06 15:38:225-3 组件拆分(配置header组件) 问题:使用stylus时报错 解决方法:依次npm安装npm install stylus-loader.还需要npm install stylus -
【慕课网实战课程笔记】Vue.js高仿饿了么外卖App
2017-11-21 16:43:27【慕课网实战课程笔记】Vue.js高仿饿了么外卖App 该课程为慕课网付费课程,笔记内容代码居多、内容简略,仅供自己日后翻阅。如有疑问或者不妥,欢迎提出指正,我看到了会回复,谢谢! -
Vue.js实战系列---饿了么(1)基础知识
2018-06-04 10:15:25MVVM框架:针对具有复杂交互...vue.js:是一个轻量级的MVVM的框架,数据驱动+ 组件化的前端开发与Angular React 对比:Vue.js更轻量,gzip后大小只有20k;Vue.js更易于上手;吸收了Angular的指令和react的组件化。V...
收藏数
158
精华内容
63