vue项目开发小问题集合

一：关于手机端rem适配的问题：
   1、手机端适配是为了一个模版能适应不同的手机屏幕，市场上手机屏幕大小各有不同，一般可归为几大类。
 一般逻辑尺寸为320*480（iphone4），320*568，375*667（iphone6）,414*736(iphone6plus)。现在设计师给的设计稿基本是640*或者是750*的。 利用rem配合媒体查询或者js动态修改html的根字体大小都是可以的。很多刚入手的新人会很困惑这个根字体大小是怎么定的，固定的还是有什么根据，我之前对此也是很困惑。因为之前一般看到别人都是定义320大小为20px。之后才明白，其实根字体大小对产品不会有什么影响，主要是根据自己开发转换方便而设定的。但是不能低于12px，因为浏览器不识别低于12px的字体大小，所以为了方便计算，一般都设置20px（为什么不设置成100px;因为设置成100px时;会导致大部分的rem都是小数，不好计算，也不直观）。如果设计是给的是640（因为这是物理尺寸，是2倍显示的。逻辑尺寸是320）,这时我们可以设置宽320px时html{font-size:20px;} 如果设计给的是750的图，那么我们可以设定宽为375px时html{font-size:20px;}；这是根字体大小设定问题。
 2、那如何去将px转换成rem呢？
   设计给的图都是px单位的。我们要写成rem。有几种方法
1）、用scss或者less写个自动转换函数（没用过，看起来貌似也不那么方便，每次写都要带个函数名）
2）、sublime编辑器有个cssrem的插件，会自动计算并替换（貌似挺好用的，不过限制于编辑器）

3)、我自己的方法是直接在photoshop里调整设计图稿。比如设计稿是750宽。实际逻辑尺寸是375px，然后设置375px对应的根字体大小是20px；那么375/20 == 18.75rem； 为了方便计量，整个扩大100倍。即调整大小为1875,然后每次量取的数值除以100就是rem的大小了。（这是我自己想的方法，目前不知道有什么缺点）,使用完以后不保存（避免对源psd文件造成改变）

4）、还有就是用gulp里的插件转换

二、vue如何正确引入图片路径问题

1、如果路径直接写在模版里是不会出错的

<img src="./../assets/avatar.png" />

这样webpack会自动解析出来，如果将图片路径直接在js里写路径，webpack不会处理，那么只是一个字符串，在js里则需要用import 或者require，还或者将图片放static文件夹里也可以

import logoSrc from './../assets/avatar.png';

{src: require('../../assets/buy.svg')}

注意：使用require是不支持内部带变量的，例如

｛src:require(imgUrl)｝

这样是会报错的

三、vue引入外部字体导致浏览器解析失败

 一开始我们将外部自己文件夹放在了assets这个文件夹下面，结果发现引入字体无效，浏览器报解析失败错误

 Failed to decode downloaded font

之后网上也查不到，刚好最近在想assets和static这两文件夹的区别，看了网上讲的也是云里雾里，只清楚static是最终文件，不会被webpack打包解析，有些人说，static文件夹放别人的东西，assets放自己的东西。然后就抱着试一试的态度，结果还真可以。也就是说外部字体文件夹放static下面，成功！

四：轮播图采用vue-awesome-swiper插件出现的问题
  1、用npm安装了最新版本的vue-awesome-swiper和swiper，结果代码是从网上找的过时的代码，搞了老半天，分页器就是不显示。最后还是看官方最新文档，改正了js代码，才显示出来。
 总结：有些东西不要网上照搬，网上的东西都是以前的，只能做个参考，最后还是自己去官网看看。

五、vue封装input组件时对v-model的封装

 1、

六、vue跳转外部链接

使用router-link或者经过vue编译后都会自动在所写的地址前面加上当前页面域名，比如

<router-link to="www.baidu.com"></router-link>

在浏览器页面会形成http:localhost:8080/www.baidu.com的路径，。

那么我们该如何跳转外部链接呢？

使用a标签可跳转外部链接

七、vue-router传递参数

vue-router传递参数分2种方式传递，一种是params，一种是query，params在路由配置里也要添加，生成后为路径的一部分

，不可缺少，而query相当于get方式的参数，在？号后面，多个参数以&符号隔开。

 <router-link :to="{name:'goldOrder',params:{id:1}, query:{goods_id:item.id, num: item.num}}"><router-link>

其中name是在配置路由里面定义的每个路由对应的名字

{ //订单

path: '/gold_order',

name: 'goldOrder',

component: goldOrder

},

在跳转页面里获取数据方式也很简单 

 this.$route.params  和 this.$route.query即可

八、vue开发项目跨域问题

    在开发阶段，跨域问题采用的是webpack的反向代理，修改config 里的index.js文件。一切都ok,上线后，采用的是cros解决跨域问题，在调用get等简单请求时是ok的。但凡是post，put方式请求全部执行了options请求（预请求）。最后我还是自己在前端这边加了个axios拦截器，在调用请求之前对传送数据做序列化处理。

axios.interceptors.request.use(function (config) {
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
        if(config.method === 'post') {
            config.data = qs.stringify({
                ...config.data
            })
        } 
        return config;
    }, function (error) {
        loadinginstace.close()
        return Promise.reject(error);
  })

发现问题解决了。但是又发现这个方法却不适用于put请求。最后没办法，让后端把唯一的一个put请求也改成了post请求。

put请求问题仍需解决。

九、vue2.0 浏览器缓存问题

   在项目开发完上线后，有个切换货币的功能，切换后刷新页面，获取更换货币后的商品价格，但发现现实并不如你所愿，上面货币是切换了，但商品的价格岿然不动，依然还是之前的货币价格。当然就想到肯定是浏览器缓存的问题了。由于之前对浏览器缓存问题只停留在很浅显的认识上。以为缓存是整个页面的缓存，页面不执行任何接口和整合数据的过程。结果错了，发现接口还是会调用，但是接口却没有从后端拿取数据，而是从浏览器本地返回了之前加载好的数据。

  然后想到就是vue能不能强制刷新当前页面，搜了半天没找到

  那只能用老套的办法，给每个接口加上一个当前时间戳。结果发现是可行，唯一的问题就是不能用缓存了。

十、全局引入scss文件

    在开发项目时，有时候需要引入全局scss文件，那么如何引入呢？这里我们用到插件 sass-resources-loader，方法如下

1、npm安装 :  npm install sass-resources-loader -D

2、修改build/utils.js

替换原来的

改为：

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/your.scss')
        }
      }
    )

然后就可以直接使用了。

十一：vue 父组件用$refs获取带有ref属性的子组件时，子组件不能是带有v-if之类的，否则$refs是获取不到对应的子组件的。

2、vue 父组件传递给子组件的属性是支持子组件的watch监听的。每当父组件传递的值改变了，子组件也会自动更新。所以也会

触发watch监听