vue2.0高仿开发饿了么外卖App——笔记

vue2.0高仿开发饿了么外卖App——笔记

课程源地址，推荐大家购买观看。

---

---

一期

第14章 项目实战-准备工作（一期）

14-4 项目目录设计

原则一：组件所需的资源和组件已组件名为文件夹名放置在一起，就近原则

```
test-example
├── src
│   ├── common（公共的模块和代码）
│   │ 	├── fonts（可以将svg转化而成的字体文件fonts放置在这个文件夹下）
│   │ 	├── js
│   │   └── stylus（可以将svg转化而成的字体文件style.css放置在这个文件夹下，并将文件后缀名修改为stylus文件后缀名styl）
│   ├── components
│   │   └── header
│   │       └── header.vue
│   └── main.js
├── static
│   └── .gitkeep
└── package.json
```

二期

CSS

1. 图片和文字居中对齐方法:
   codepen

	.user {
		line-height: 12px;
		font-size: 0; // HACK: 图片和文字处在一个父容器内时避免出现空隙
	}
		.name {
			display: inline-block;
			vertical-align: top;
			font-size: 10px;
			color: #272626;
		}
		.avatar {
			border-radius: 50%;
		}

###　js

1. 时间戳转换为字符串的函数

/**
 * 时间戳转换为字符串格式
 * @params {date} date 时间戳
 * @params {fmt}  fmt 格式，形如：'yyyy-MM-dd hh:mm'
 */
export function formatDate(date, fmt) {
	if (/(y+)/.text(fmt)) {
		fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));		
	}
	let o = {
		'M+': date.getMonth() + 1,
		'd+': date.getDate(),
		'h+': date.getHours(),
		'm+': date.getMinutes(),
		's+': date.getSeconds()
	};
	for (let k in o) {
		if (new RegExp(`(${k})`).test(fmt) {
			let str = o[k] + '';
			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
		}
	}
	return fmt;
};

/** 除年外的单位补零 */
function padLeftZero(str) {
	return ('00' + str).substr(str.length);
}

知识点索引

扩展索引

参考链接

感谢