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>

 7,弹出层css striky footer

<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content">
        </div>
        <div id="side">
        </div>
    </div>
</div>
<div id="footer">
</div>
//css
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;}  /* 必须使用和footer相同的高度 */
#footer {position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;}
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */