首页 > 代码库 > 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 饿了么的技术点
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。