vue 饿了么的技术点

Posted 2020-09-11

一：项目目录设计。

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>