vue-cli3.0+ cube-ui配置 移动端+ axios + 跨域代理设置

首先vue-cli3.0创建好项目;

然后https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start cube-ui 官网上找到a安装cube-ui的指令,因为是Vue CLI vue-cli@3,所以直接在vue项目初始化后 直接运行vue add cube-ui即可。

**上图为vue add cube-ui下载中的选项，根据自己喜好配置一下就行。这里我选的是 全局引入和vw布局。
安装完之后，**在main.js里引入
//引入cube-ui移动端插件
import Cube from ‘cube-ui’

Vue.use(Cube)

给app.vue里写一个padding值，然后重启项目查看对应的样式


可以看出，px单位自动转换为了vw单位，此时说明移动端配置成功。

然后安装axios并配置跨域

1. npm install axios
2. npm install vue-axios
   显示安装完成之后，在main.js里写入以下代码

import Axios from ‘axios’;
import VueAxios from ‘vue-axios’;
import Qs from ‘qs’;

// 创建一个axios实例,用以保证在用php作后台的情况下，post传递json数据能被接收到!!这里作了一下处理
var axios_instance = Axios.create({
// config里面有这个transformRquest， 这个选项会在发送参数前进行处理。 这时候我们通过Qs.stringify转换为表单查询参数
transformRequest: [function (data) {
data = Qs.stringify(data);
return data;
}],
// 设置Content - Type
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
}
})
Vue.use(VueAxios, axios_instance);

跨域：
在vue.config.js里加入,如果你的这个文件里面有别的代码，那就把里面的devServer复制过去，当作对象添加到module.exports里就行了
module.exports = {
// 配置 axios 代理请求
devServer: {
proxy: {
‘/api’: {
target: ‘http://192.168.3.215:8888’,//示例地址
// 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
changeOrigin: true,
ws: true,
pathRewrite: {
// 替换target中的请求地址，比如说以后你在请求http://abcd.com/XXXXX这个地址的时候直接写成/api即可
‘^/api’: ‘/’
}
}
}
},
关于vue移动端配置的方法还有其他别的，这里只是说一下自己目前使用的这种方法，希望能帮到需要帮助的人，不足之处欢迎指正