1.VUE的dart-sass,rem转换,tarbar 组件：
安装dart-sass,rem转换：
dart-sass：
安装rem转换：
npm i amfe-flexible --save
把px转成rem的插件
只能在css文件里面写 <style>里面的
npm i postcss-px2rem --save
2、main.js引入
import rem from 'amfe-flexible'
为了全局使用rem 插件需要use一下
Vue.use(rem)
3、package.json中添加如下代码：
"remUnit":75表示 ui小姐姐给的图 是按照750px这个尺寸设计的
"postcss":{
"plugins":{
"autoprefixer":{},
"postcss-px2rem":{
"remUnit":75
}
}
}
4、修改了 src路径不需要重启，但是修改了配置项 需要重新启动 npm run serve
5、需要在css中设置样式，在行内样式style里面写无效
.s1{
/* 30px/75=0.4rem */
font-size:30px;
}
6、html的根元素 font-size会根据屏幕的变化而变化 但是元素rem值不会
效果：页面的尺寸也会根据屏幕的变化而变化
tarbar组件：
<template>
<div class="tabbar">
<div
class="item"
v-for="(v, i) in list"
:key="i"
@click="handler(i)"
:style="{ color: v.active ? 'red' : '' }"
>
<img :src="v.active?v.activeurl:v.imgurl" alt="" class="img"><br>
{{ v.title }}
</div>
</div>
</template>
<script>
export default {
name: "TabBar",
props:["list"],
methods: {
handler: function (i) {
this.list.forEach((r) => {
r.active = false;
});
this.list[i].active = true;
},
},
};
</script>
<style scoped lang='scss'>
.tabbar {
width: 100%;
padding: 10px;
height: 90px;
background: #ccc;
position: fixed;
bottom: 0;
left: 0;
display: flex;
.item {
flex: 1;
font-size: 22px;
text-align: center;
.img {
width: 50px;
height: 50px;
}
}
/* 移动端的兼容问题因为移动端没有鼠标,只有手指 */
/* .item:hover{
cursor: pointer;
background: red;
} */
}
</style>
App.vue文件：
<template>
<div class="app">
<div class="box">
<h1 class="s1">欢迎使用sass</h1>
</div>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<ul>
<li v-for="(v, i) in 4" :key="i">{{ v }}</li>
</ul>
<tab-bar :list="list" />
</div>
</template>
<script>
import TabBar from "./components/TabBar.vue";
export default {
components: { TabBar },
name: "App",
data() {
return {
list: [],
};
},
created() {
setTimeout(() => {
this.list = [
{
title: "首页",
active: true,
imgurl: require("@/assets/home.png"),
activeurl: require("@/assets/home_active.png"),
},
{
title: "分类",
active: false,
imgurl: require("@/assets/fenlei.png"),
activeurl: require("@/assets/fenlei_active.png"),
},
{
title: "搜索",
active: false,
imgurl: require("@/assets/search.png"),
activeurl: require("@/assets/search_active.png"),
},
{
title: "购物车",
active: false,
imgurl: require("@/assets/shopping.png"),
activeurl: require("@/assets/shopping_active.png"),
},
{
title: "我的",
active: false,
imgurl: require("@/assets/my.png"),
activeurl: require("@/assets/my_active.png"),
},
];
}, 500);
},
};
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
/* 特点：可以使用变量 可以嵌套 图片路径也可以使用变量*/
$colorRed: red;
$colorGreen: green;
$colorBlue: blue;
$k: 100px;
ul {
width: $k;
height: $k;
background: $colorRed;
li:nth-of-type(1) {
/* 写减法的时候左右要加空格，否则会理解为杠- */
width: $k - 20px;
background: $colorGreen;
}
li:nth-of-type(2) {
width: $k + 20px;
background: $colorBlue;
}
}
.box1 {
width: $k * 2;
height: $k * 2;
background: $colorRed;
.box2 {
width: $k;
height: $k;
background: $colorGreen;
.box3 {
width: $k/2;
height: $k/2;
background: $colorBlue;
}
}
}
.box {
width: 200px;
height: 200px;
border: 1px solid $colorRed;
/* background: url("@{imgurl}logo.png") no-repeat; */
h1 {
color: $colorRed;
}
}
.s1{
/* 30px/75=0.4rem */
font-size:30px;
}
</style>
效果图：
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参数的时候，最好做一次刷新。
