首页 > 代码库 > vue 饿了么的技术点

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 = http://www.mamicode.com/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>

 

vue 饿了么的技术点