【vue】--- 关于npm警告fsevents和vue-cli项目中的一些坑，持续更新

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循环的话会报错，而且看到的效果是页面渲染的结果和自己预期的一致：

  

      
      {{seller.supports[index].description}}
  

报错信息：

1264576-20180111171252629-347763455.png

原因很简单，就是请求的数据没回来，然后在渲染DOM的时候，找不到seller.supports[index].description 对应的数据，所以会报错，
解决办法就是加个v-if判断一下请求的数据回没回来，然后再渲染DOM；

  

      
      {{seller.supports[index].description}}
  

  

      
      {{seller.supports[index].description}}
  

加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;
}

10. 项目最后打包：执行 npm run build 命令 （自动执行build.js文件中的代码），打包过程中会将js文件和css文件提取出来，分别存到对应的文件夹下，文件名是哈希值，内容改变哈希值改变，然后需要 在根目录下创建server.js文件来启动项目（index.html），如果不想让项目可以调试，可以将sourceMap改为false；