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;

### 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&notice=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&notice=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&notice=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用@

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

上一篇:IOS内存的一篇文章


下一篇:Android开发-UI布局2