1. install一个npm包的时候，总是会报这个警告；
1264576-20180106171925393-1251801241.png
网上查资料知道，这个fsevents是mac下用的，windows忽略即可；
2. 关于在main.js中引入less文件的问题；
import './common/less/index.less';
就会报这个错，说相关模块没有找到，这个问题，我在网上找了很多资料，然后我也都试了，都不好用，于是我的解决办法就是不在main.js中引入less（我投降了还不行么，2333），
另外，如果有知道如何解决的大牛，可以在下边评论区告诉我哦，谢谢啦~
1264576-20180106172735315-692175096.png
3. 首先目录结构如下：
1264576-20180107230739456-1211347657.png
然后，在header.vue文件中，想引入mixin.less文件，mixin.less文件内容如下：
1264576-20180107231544331-1044128900.png
引入less文件之后，在header.vue文件中使用.bg-img(brand)；就会报错：
1264576-20180107232132721-1977850983.png
原因就是路径有问题，在报错中，不难发现这个路径是相对于mixin.less文件的路径，在这个路径中没有找到指定的图片资源，当然会报错了，而我想做的就是让mixin.less中写的背景图片路径是相对于我这个header.vue文件来的，然后在 网上找到解决办法就是修改mixin.less中的代码为：
1264576-20180107232725674-971095077.png
在url前加上~这个符号，就会发现问题解决了；
4. 在vue中异步请求的数据没回来的话，使用v-for循环的话会报错，而且看到的效果是页面渲染的结果和自己预期的一致：
<div class='activities-list'>
<div class='list-wrap' v-for='(value, index) in description' :key='index'>
<span class='list-brand' :class='value'></span>
<span class='list-text'>{{seller.supports[index].description}}</span>
</div>
</div>
报错信息：
1264576-20180111171252629-347763455.png
原因很简单，就是请求的数据没回来，然后在渲染DOM的时候，找不到seller.supports[index].description 对应的数据，所以会报错，
解决办法就是加个v-if判断一下请求的数据回没回来，然后再渲染DOM；
<div class='activities-list'>
<div class='list-wrap' v-if='seller.supports' v-for='(value, index) in description' :key='index'>
<span class='list-brand' :class='value'></span>
<span class='list-text'>{{seller.supports[index].description}}</span>
</div>
</div>
<div class='activities-list' v-if='seller.supports' >
<div class='list-wrap' v-for='(value, index) in description' :key='index'>
<span class='list-brand' :class='value'></span>
<span class='list-text'>{{seller.supports[index].description}}</span>
</div>
</div>
加v-if的时候，又出现了一个问题：v-if和v-for同时使用会冲突么？ 上面的两种我都试了，页面的效果肉眼看是没影响的，
但是上网查资料说：当v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级，所以我为了保险起见，还是用的第二种~；
5. backdrop: blur(10px); //ios下背景模糊，移动端可看效果，pc浏览器看不见；
6. 关于1px border问题，如果直接给元素设置border-bottom：1px solid #fff；这样在pc端看着像是1px，但是在实际手机上看就不是1px，而是2px，那么解决办法就是对目标元素添加after伪元素，然后给伪元素设置border，然后对目标元素下的伪元素进行CSS3的缩放Y轴： transform: scaleY( 缩放比例 )；
7. el.offsetHeight // 触发浏览器重绘
8. 页面顶部大头图加载的问题：因为图片大小不规则，而且在给img添加vue的：src属性时，浏览器最初渲染DOM时候，img高度是0，当vue读取并对：src属性值进行替换加载图片的时候就会出现卡顿，解决办法就是给img的父级设置：宽100%，上padding或者下padding为100%(相对于宽度大小)，然后子元素img相对父级进行定位，并设置宽高100%；
9. 利用localStorage存储收藏商家的状态
export function saveToLocal(id, key, val) {
let seller = window.localStorage._seller_;
if (!seller) {
seller = {};
seller[id] = {};
} else {
seller = JSON.parse(seller);
}
if (!seller[id]) {
seller[id] = {};
}
seller[id][key] = val;
// localStorage不允许直接存储一个对象
window.localStorage._seller_ = JSON.stringify(seller);
}
读取状态：
export function loadFromLocal(id, key, def) {
let seller = window.localStorage._seller_;
if (!seller) {
return def;
}
seller = JSON.parse(seller)[id];
if (!seller) {
return def;
}
return seller[key] || def;
}
网友评论