vue05----less版本问题、移动端适配、alias、jsonp、axios、proxy、sass和less的区别

### less报错：

    原因：less版本不统一

    解决：npm install less@2.7.3

### 适配

    ①index.html中：

    <script>

        // 将1rem设置为屏幕宽度的1/10，1rem=37.5px

        document.documentElement.style.fontSize=document.documentElement.clientWidth/10+"px";

    </script>

    ②variable.less中：@remSize:37.5;

    ③mixin.less中：

        .w(@px){

            width: unit(@px/@remSize,rem);

        }

### alias别名

    根目录下新建vue.config.js文件，配置好后重新启动项目，然后将相对路径换成别名。

    部分代码：

    ①vue.config.js中：

        chainWebpack:(config)=>{

            config.resolve.alias

            .set("components",path.join(__dirname,"./src/components"))

        }

    ②组件中：

        import MBanner from "../components/m-banner.vue";

        换成

        import MBanner from "components/m-banner.vue";

    注意：

        在style标签里使用alias，需要在别名前加 ~ 如：@import "~style/index.less";

        App.vue和style是同级的，可以不加

### 获取网络数据

    jsonp（m-banner.vue）

        ①安装：npm install jsonp

        ②引入：import jsonp from "jsonp";

        ③请求：jsonp(url,{param:"需要传给后端的回调key值",(err,data)=>{}});

            例：

            created() {

                let url="https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8¬ice=0&format=jsonp&platform=h5&uin=0&needNewCode=1";

                jsonp(url,{param:"jsonpCallback"},(err,data)=>{

                    this.lists=data.data.slider;

                });

            },

            注意：这是network中的地址：https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8¬ice=0&format=jsonp&platform=h5&uin=0&needNewCode=1&jsonpCallback=jp0，删掉其中的&jsonpCallback=jp0，jsonp()的第二个参数对象写成{param:"jsonpCallback"}

    ajax（Recommend.vue）

        ①安装：npm install axios

        ②引入：import axios from "axios";

        ③请求：

            initRecommendData(){

                // g_tk=1928093487 时间戳，保存期2天，数据加载不出来，换下这个时间戳

                let url="/hotMusicList/music/api/getDiscList?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8¬ice=0&format=json&platform=yqq&hostUin=0&sin=0&ein=29&sortId=5&needNewCode=0&categoryId=10000000&rnd=0.03558038023620558";

                axios.get(url,(err,data)=>{

                    console.log(err)

                    console.log(data)

                });

            }

        ④出现跨域问题，利用服务器代理解决

        vue.config.js中：

                devServer:{

                    proxy:{

                        "/hotMusicList":{

                            target:"http://ustbhuangyi.com",// 目标服务器路径

                            changeOrigin:true,// 是否允许改变源，默认为true

                            pathRewrite:{// 重写路径

                                "^/hotMusicList":""

                            }

                        }

                    }

                },

        注意：对vue.config.js文件做了修改，一定要重启

### proxy（服务器代理）

    ①初始化：npm init --yes

    ②装插件：npm install express axios cors request

    ③新建server.js文件

    ④启动node服务器：node server.js（服务器每做一次修改都要重启）

### Q：

    1、sass和less的区别：

        相同点：

            ①混入（Mixins）：class中的class

            ②参数混入：可以传递参数的class，就像函数一样

            ③嵌套规则：class中嵌套class，从而减少重复的代码

            ④运算：css中用上数学

            ⑤颜色功能：可以编辑颜色

            ⑥名字空间：分组样式，从而可以被调用

            ⑦作用域：局部样式修改

            ⑧JavaScript赋值：在css中使用JavaScript表达式赋值

        不同点：

            ①less环境较sass简单，sass需要安装ruby环境，less基于JavaScript

            ②less使用较sass简单，less没有去除css原有的属性，可以直接在less中书写css代码，只要了解css就很容易上手

            ③sass比less强大一些

            ④声明变量，sass用$，less用@

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删