vue饿了么的技术点

关键词：

一：项目目录设计。

1：制作矢量图片的图标字体。

打开icomoon.io网站,点击import icons ，上传自己的svg图片，制作自己的图片，上传之后点击generate font图标，下载然后把其中的font文件夹复制，style.css复制到style文件夹，修改为icom.styl就可以用了。

2：stylus---css的预处理器。

没有大括号， 没有分号，进入icon.styl去掉这些。

在package.json 里添加stylus-loader 2.1.1版本，然后npm install。

解决cant find model stylus报错问题--

1、在package.json文件中写入依赖：

 "stylus-loader": "^2.5.0",
  "stylus": "0.52.4",
然后cnpm i stylus-loader stylus --save

写css样式的时候，不必写兼容性的写法，是因为vue-loader已经处理好了兼容性。

3：设备像素比，观看张鑫旭的文章

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

4：data.json数据接口的编写。

在webpack的入口文件dev-server.js里

var app = express()

var appData = require(‘../data.json‘);
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

//定义路由
var apiRouters =express.Router();
apiRouters.get(‘/seller‘,function(req,res){
  res.json({
    errno:0,
    data:seller
  });
});

apiRouters.get(‘/goods‘,function(req,res){
  res.json({
    errno:0,
    data:seller
  });
});

apiRouters.get(‘/ratings‘,function(req,res){
  res.json({
    errno:0,
    data:seller
  });
});
app.use(‘/api‘,apiRouters);

5：es里的代码风格设置为有分号。

.eslintrc.js里找到rules，添加新条件

‘semi‘:[‘error‘,‘always‘]
忽略webstorme的indent配置

‘indent‘:0

6：创建自动模板-webstorme的技巧。

创建vue模板，在设置的编辑器-文件代码和模板，添加vue

<template>

</template>

<script type="text/ecmascript-6">

<script>

<style lang="stylus" rel="stylesheet">

</style>

经典文摘：饿了么的pwa升级实践（结合vue.js）

...Vue.js官方推特第一次公开到现在，我们就一直在进行着将饿了么移动端网站升级为 ProgressiveWebApp 的工作。直到近日在GoogleI/O2017上登台亮相，才终于算告一段落。我们非常荣幸能够发布全世界第一个专门面向国内用户的PWA... 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、准备工作1.大前提：已安装好node、npm、vue、vue-cli、stylus（此项目使用stylus来编译）2.开发软件：GoogleChrome（建议安装插件vue-devtools，方便调试），webstorm/sublimeText/VSCode（推荐使用webstorm，sublime和VSCode需要安装相应的插件）3.... 查看详情

饿了么的萧瑟之秋

650)this.width=650;"src="http://zhuyi.blog.techweb.com.cn/files/2016/09/271828008142082724.jpg"title="271828008142082724"width="400"height="240"class="aligncentersize-fullwp-image-1867"style="border:0 查看详情

饿了么的架构设计及演进之路

...需要对架构投入更多的精力来承载网站在爆发时的流量。饿了么成立已经8年，现在日订单量突破900万，我们也有了较为完善的网站架构。 一、网站基础架构 初期，我们使用了能够更容易拓展SOA的框架。我们用SOA的框架... 查看详情

前端实战项目：vue.js实现外卖平台webapp,饿了么项目的翻版

...scroll插件，进行左右滑动图片。效果预览：再说一篇，是饿了么的翻版。 查看详情

饿了么cto张雪峰：允许90后的技术人员“浮躁“一点

编者按：今年4月，饿了么正式加入了阿里新零售战队，进一步加速其在本地生活市场的扩张速度。在创业9年的时间中，饿了么在外卖领域经历了真正的“从0到1”，尤其是在外卖平台的技术升级方面，越过了一个又一个的无人... 查看详情

饿了么cto张雪峰：允许90后的技术人员“浮躁“一点

编者按：今年4月，饿了么正式加入了阿里新零售战队，进一步加速其在本地生活市场的扩张速度。在创业9年的时间中，饿了么在外卖领域经历了真正的“从0到1”，尤其是在外卖平台的技术升级方面，越过了一个又一个的无人... 查看详情

饿了么订单记录怎么删除

...我们饿的时候已经不需要再自己动手做饭了，只需要点开饿了么就可以解决吃饭的问题。饿了么的出现给我们生活带来了很大的方便，但是很多朋友一直不知道怎么删除订单记录，今天就让我来教教大家吧。1、打开饿了么，我... 查看详情

饿了么vue实现学习笔记

技术栈：vue2+vuex+vue-router+webpack+ES6/7+fetch+sass+flex+svg以功能实现着手学习1.定位功能home.vue 通过跨域获取当前的地理位置 http://cangdu.org:8001/v1/cities?type=guess2.选择城市转跳页面到搜索详细地址home.vue 根据API接口的ID，通过 router-link:to=... 查看详情

阿里饿了么？复盘马云102年商业大思维

2018年2月26日，突然传来阿里可能以95亿美元全资收购饿了么的传闻，阿里巴巴官方随后表示对“市场传言”不予置评。2016年8月，阿里巴巴和蚂蚁金服一起向饿了么投资12.5亿美元，2017年又进一步增持饿了么。2017年8月，饿了么宣... 查看详情

面试大战5轮，我顺利当上饿了么总监！

...会议室，后来才知道这个会议室名字叫蚵仔煎（饿了么的会议室以食物名字命名，挺有趣࿰ 查看详情

仿饿了么首页导航栏（viewpager）

1、需求分析在饿了么首页中我们能看到这样的布局（如下图）。红框内是一个可以左右滑动的页面，每一个页面类似于九宫格，都有可供点击图标。对于这样的布局，我在网上找了很久都没有找到相关的名称，所以我这里暂时... 查看详情

饿了么购物车动画(代码片段)

前言之前用饿了么印象最深刻的是联动菜单和小球飞入购物车动画，所以想看看别人是怎么实现的，但是看了很多仿饿了么的demo都是实现了一个完整的大的项目，要找到那个小模块很麻烦，所以自己将联动菜单和动画提取出来... 查看详情

基于vue2+nuxt构建的高仿饿了么（2018版）(代码片段)

前言高仿饿了么，以nuxt作为vue的服务端渲染，适合刚接触或者准备上vuessr的同学参考和学习项目地址如遇网络不佳，请移步国内镜像加速节点效果演示查看demo请戳这里（请用chrome手机模式预览）移动端扫描下方二维码API接口文... 查看详情

“vue饿了么实战”视频

“vue饿了么实战”视频，要的加我qq：840573460650)this.width=650;"src="https://s5.51cto.com/wyfs02/M01/06/B8/wKiom1m85FvjU2zgAAA3IuL_Eng432.png-wh_500x0-wm_3-wmp_4-s_4095027821.png"title="QQ截图20170916163541.png"alt="w 查看详情

vue2高仿饿了么app

Github地址: https://github.com/ccyinghua/appEleme-project 一、构建项目所用：vueinitwebpackappEleme-projectnpmrundevcnpminstallnode-sass--save-devcnpminstallsass-loader--save-dev//sass-loader依赖于node-sas 查看详情

用vue制作饿了么首页

...网页，实现原则是将他们分块，然后各个击破。很明显的饿了么首页分为三个部分（组件），  上面的头部（商家信息），  中间路由  购物车每部分先占住自己位置，然后挨个将这三部分分别实现完整。我... 查看详情

vue饿了么项目的相关笔记链接

http://www.mtons.com/content/1819.htmhttp://www.tuicool.com/articles/F7BnaiYhttps://segmentfault.com/a/1190000007784366http://www.tuicool.com/articles/7zUruij 查看详情