Vue仿饿了吗的页面骨架和header组件开发

总结包含以下内容：页面骨架和header组件开发，页面布局，移动端的开发知识

起始

Vue-cli，脚手架搭建基本代码框架
Webpack，构建工具
Vue-resource，与后端做数据交互
Vue-router，做前端路由，可实现单页应用
eslint，ES6代码风格检查工具，用来规范风格
MVVM框架有React,Vue.js,Angular
Vue.js是一款轻量级框架，gzip后只有20多KB，适合做移动端项目。借鉴了Angular的指令和React的组件化，核心思想是数据驱动和组件化（封装可重用的代码）
MVVM：View视图部分（DOM），ViewModel：（通讯，观察者，监听，数据双向绑定），Model：（数据，JavaScript对象）
组件化，工程化，模块化

页面骨架搭建

使用Vue-cli作为项目的脚手架，安装webpack#1.0

npm install -g vue-cli	// 全局安装Vue-cli
vue init webpack sell	//sell是项目名称
// 在init过程中勾选ESlint，规范ES6编写
cd sell	// 进入sell文件夹
npm install	// 安装nodemodule模块
npm run dev	//运行

package.json中dependences是运行依赖，devDependencies是开发依赖
babelrc是用来做编码的预设，"comments": false表示代码转换后不生成注释

项目使用了Mock数据来模拟后台数据
Vue的标签名对组件名大小写不敏感
在Vue中，改变路由<router-view></router-view>这部分会刷新
在Vue中使用Vue-router要更换掉new Vue({})这种写法，实例化方法为Vue.extend({})

1像素边框：因为手机的DPR(设备像素比)不同，所以1像素的边框在不同手机的像素是不一样的。一种解决是使用@media query，以下为stylus写法：

@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
	.border-1px
		&::after
			-webkit-transform: scaleY(0.7)
			transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
	.border-1px
		&::after
			-webkit-transform: scaleY(0.5)
			transform: scaleY(0.5)

在手机端查看网页，Windows用户可以在cdm中输入ipconfig来查看本机的IP地址，即IPv4。复制ip地址，更换掉浏览器中的localhost，用手机登录该地址即可查看。前提是在同个局域网下
在App.vue组件，即Header的父组件，通过发送一个Ajax请求，获取商家的相关数据。然后将这个数据通过header的prop属性传给App.vue组件
处理传过来的数据对象的数组时，要用v-if来判断是否存在这个数组对应的属性对象。因为一开始这个数据对象可能为空。
去除文字和其它元素的缝隙：方法一是设置父元素的font-size为0，再设置文字部分的font-size，方法二是去掉并排标签的空隙。
项目图片的选择使用2x和3x图片来适应不同DPR的移动端
<style lang="stylus" rel="stylesheet/stylus"></style>中的@import写的是文字路径，不能使用在build/webpack.base.conf.js中自定义的路径
vertical-align: top;的使用：把元素的顶端与行中最高元素的顶端对齐
webpack在编译过程中会把图片转成Base64图片
Chrome浏览器的字体最小为12px，更小的字体要在移动端看

带省略号的不跨行文字的CSS设置

1
2
3

white-space: nowrap
overflow: hidden
text-overflow: ellipsis

底部模糊背景的制作：filter: blur(10px);滤镜模糊，滤镜阴影会露出可使用overflow: hidden;解决
CSS sticky footer布局：一种方法是：比如：上部分内容设置padding-bottom: 64px，下部分内容设置为margin: -64px auto 0 auto
自适应直线中有文字的布局实现，使用Flex布局。使用div标签而不是span标签，因为span标签在安卓浏览器下有出错的可能。Vue-loader在编译文件时，会使用postcss工具来自动增添兼容性代码，所以写display: flex足矣
对展开页面使用了vue的transion，并在css中定义相关属性
展开页的背景模糊，backdrop-filter: blur(10px)只能在ios的移动端生效

Vue仿饿了吗的页面骨架和header组件开发

起始

页面骨架搭建

header组件开发

谢谢打赏~