1.VUE的dart-sass,rem转换,tarbar 组件：
安装dart-sass,rem转换：
dart-sass：
安装rem转换：
npm i amfe-flexible --save
把px转成rem的插件
只能在css文件里面写
App.vue文件：
欢迎使用sass
- {{ v }}
效果图：
2.移动端的兼容问题：
技术栈
vue2.0 + vuex + vue-router + webpack + axios + scss + ES6/7
cookies跨域不能携带
cookies在跨域的时候，每次刷新，cookies的值都会发生变化。这个时候是已经设置了
Access-Control-Allow-Origin：*
，然后再设置上
withCredentials:true
，最后再尝试一下，不仅cookies带不过来，之前还可以跨域的请求，现在都报错了。你对错误一无所知。
网上给了一些解释，意思是，你的前端与后端不在同一主域下（就是不在同一域名下）。而且刚刚设置的两个东西会造成冲突，
withCredentials:true
导致跨域的设置失效了。
既然都用了vue，那就配置一个代理吧
用 vue-cli 3.0 构建的vue项目与 vue-cli 2.0 构建的项目，在目录上会发生变化，配置文件也会改变。不过配置的时候，内容还是不会变化的。
vue-cli 2.0 下的配置
找到根目录，在 config 文件夹下的 index.js 内，加上以下代码。具体每一项表示的含义，可以去webpack的官网里找。这样设置之后，cookies的值也不会每次变化了。
module
.exports={
dev:{
proxyTable:{
'/xxx':{
target:'http://192.168.1.1:8080',
ws:true,
changeOrigin:true
}
}
}
}
vue-cli 3.0 下的配置
与 vue-cli 2.0 的配置是一样的，唯一比较麻烦的是， vue-cli 3.0 隐藏了配置文件，项目看上去变得很简洁，所以找不到在哪里配置。
在根目录下新建文件 vue.config.js ，项目会默认读取这个文件。文件的详细配置可以在 github地址里仔细阅读。
打开新建好的 vue.config.js ，写上上面那段代码后，重启一下项目就好了。
重点
修改了这个配置，一定要重启应用，否则修改将不会生效。
另外，如果在开发中使用了跨域，在实际的生产中，webpack 的代理肯定就用不了了，需要使用 nginx 来做代理。
不想配置代理的看这里。但是，需要后端配合修改
这里以 axios 为例，使用的时候将 axios 当成 vue 的全局对象处理。代码如下：
axios.defaults.withCredentials=true;
axios.defaults.crossDomain=true;
Vue.prototype.$axios= axios;
因为需要跨域， withCredentials 和 crossDomain 都需要配置，后端的看一下别人家的博客吧。因为不是我写的，就不乱说了。
使用 axios 时，直接这么使用：
this.$axios({...})
苹果手机的样式兼容
作为艰辛的前端，只用得起OPPO R9s，无奈80%的用户都是苹果手机，和另一个小米Note的前端兄dei一起花了三天调试苹果的兼容问题。
问题什么时候会出现，完全没有意料到，iphone 7 与 7P 的显示就有不同，与 iphone 6 还有 iphone 8 也不一样。做这种调试，真的得所有的苹果机型都得有才行。谁让苹果手机这么耐用，除了被偷，和有钱，手机可以用到电池爆炸。
苹果手机的问题主要以下4种：
图片扭曲，甚至变形
在滚动的时候很卡顿
点击的时候会出现蓝色的遮罩层
被固定的头部还有底部，在上拉和下拉的时候都会被遮住
图片扭曲，甚至变形
出现这个问题，是高估了苹果手机在app里提供的内核的性能。查阅了一些资料，说的是苹果为app提供的内核，渲染效率还有兼容性都是非常低下的。苹果兼容问题，百度、谷歌一下，都是一大堆的抱怨。
我这里的问题是因为使用了vue 的 v-if 来渲染图片。场景是这样的，有5张图片，需要根据传入的参数来选择显示哪一张，点击下面的选项时，图片还可以跟着变化。然后神奇的一幕发生，图片各种扭曲，变形，甚至分裂。检查了一遍样式，没发现问题后，我把 v-show 替换了 v-if 然后就好了。然后开始怀疑人生，苹果手机，还是 7p ，渲染效率低的可怕啊。
滚动的时候卡顿
卡顿嘛，很正常，于是在 #app 下加上了一句
-webkit-overflow-scrolling: touch;
，就不卡顿了。你以为问题解决了吗？
拿出安卓手机一试，分分钟想打人。
机智的小米Note兄dei，把这句话加了 body 标签上，同时加上了一句 overflow: auto 就好了。
点击的时候会出现蓝色的遮罩层
这个很简单，在 IOS 系统下， webkit 内核的问题，加上一句
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
就行了
被固定的头部还有底部，在上拉和下拉的时候都会被遮住
既然用户是苹果，别想着用 fixed 定位了。元素被固定住的时候，怎么拉都不行。只有通过布局的方式，让这个看起来更像固定定位
微信浏览器
用了 vue 就得明白，有的时候链接上的参数是有的，但是从微信点击“复制链接”和“在浏览器打开”的时候，参数就没了。是因为，浏览器仍然读取的是上一次的地址。在需要URL参数的时候，最好做一次刷新。