vue项目配置及代理解决跨域

axios数据请求

1.下载模块：npm install axios

2.axios特点：

1.支持在浏览器当中发起XMLHttpRequest请求

2.支持Promise

3.自动转换json数据

4.安全，保护面首XSRF攻击

3.实现。

(1)视图页面

<script>
// 在程序加载页面开始渲染的时候调用
  mounted() {
    console.log('-------')
 this.axios.get('/xiaodouyu/api/RoomApi/live').then(function(data){
      console.log(data)
    },function(err){
      console.log(err)
    })
  }
</script>

(2)主函数main.js

import axios from 'axios'
// 原型对象
Vue.prototype.axios = axios

4.配套的解决跨域的方法

在项目下创建一个vue.config.js文件，里面内容如下：

module.exports = {
    configureWebpack:{
        devServer:{
            proxy:{   //低版本用proxyTable
                '/xiaodouyu':{
                    // 目标
                    target:"http://open.douyucdn.cn",
                    // 改变请求源
                    chaneOrigin:true ,
                    // 路径重写
                    pathRewrite:{
                        '^/xiaodouyu':''
                    }
                }
            }
        }
    }
}

斗鱼小项目

1.斗鱼项目配置

在项目下创建vue.config.js文件

modules.exports = {
    
    //关闭代码检查
    lintOnSave:false,
    
    configureWebpack:{
        devServer:{
            proxy:{
                '/douyu':{
                   target:"http://open.douyucdn.cn",
                    changeOrigin:true,
                    pathRewrite:{
                        '^/douyu':""
                    }
                }
            }
        }
    }
}

2.组件作用域

<style scoped>
	//scoped 作用域，使该组件所有css样式仅在本组件有效
</style>

3.组件混入

import share from '../share.js'
    export default {
        //混入
        mixins:[share]
    }

4.插槽

组件标签中间写的通通放入插槽<slot></slot>

<vue-first>首页</vue-first>

5.在线人数过滤

<span v-text="$options.filters.onlineNumber(roomInfo.online)"></span>
<script>
export default {
        filters:{
            onlineNumber:function(oldValue){
                if(oldValue < 10000){
                    return oldValue;
                }
                var newValue = (oldValue / 10000).toFixed(1) + "万";
                return newValue;
            }
        }
    }
</script>

生鲜项目

1.vux所需模块下载

vue init webpack 项目名
npm install vux --save
npm install vux-loader --save
npm install vue-style-loader
npm install css-loader
npm install less-loader
npm install less