Vue开发饿了吗外卖app实战
风里有诗句哈
有事请私信
展开
-
vue开发饿了吗外卖app①——最新的vue没有dev-server.js,如何进行后台数据模拟?
最新的vue里dev-server.js被替换成了webpack-dev-conf.js,在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改第一步,在const portfinder = require(‘portfinder’)后添加const express = require('express')const app = express()//请求serve...原创 2019-03-30 17:08:20 · 327 阅读 · 0 评论 -
vue开发饿了吗外卖app②——安装和使用vue-router
详见vue-router使用方法在package.json中写入vue-router依赖,命令行执行npm install "dependencies": { "stylus": "^0.54.5", "vue": "^2.5.2", "vue-router": "^2.2.0" },App.vue中写入<template> <...原创 2019-03-30 23:19:38 · 334 阅读 · 0 评论 -
vue开发饿了吗外卖app③——移动端高分辨率屏幕下边框1px变大问题通用解决
//新建mixin.stylborder-1px($color) position relative &::after display block position absolute left 0 bottom 0 width 100% border-top 1px solid $color content ' '...原创 2019-03-31 17:37:21 · 300 阅读 · 0 评论 -
vue开发饿了吗外卖app④——使用vue-resource获取数据
vue-resource安装依赖 "dependencies": { "stylus": "^0.54.5", "vue": "^2.5.2", "vue-router": "^2.2.0", "vue-resource": "^1.0.1" },在main.js中导入并注册vue-resource,这样就能在其他所有组件中使用vue-resourc...原创 2019-03-31 23:13:08 · 379 阅读 · 0 评论 -
vue开发饿了吗外卖app⑥——goods商品列表页开发和小球飞入动画
goods组件显示的区域是固定的,也没有滚动条,所以是采用绝对布局的,左右分为menu栏和foods栏,左边固定布局,右边自适应布局,采用flex布局。写CSS样式的时候,尽量用class,少用tag,因为class的查找效率优于tag,尤其是嵌套层级比较多的时候。左边的menu栏有些是一行有些是多行,要做到不管单行还是多行都是垂直是居中,可以用display:table,table布局是...原创 2019-04-11 21:56:10 · 877 阅读 · 0 评论 -
vue开发饿了吗外卖app⑤——使用better-scroll详解和一些知识点
1.可以通过给标签设置ref="menuWrap"属性,然后在this.$refs.menuWrap可以访问这个标签的原生DOM,同样,给组件绑定ref=”组件名”就可以访问组件的函数,例如this.$refs.shopCart.drop(target)2.在需要计算DOM相关的东西时,一定要保证DOM已经渲染了,其实DOM真正发生变化时是在this.$nextTick()这个回调函数后,...原创 2019-04-09 00:14:35 · 751 阅读 · 0 评论