Vue 单文件配置
1.安装npm
npm 全程为Node Package Manager,是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包
2.由于网络原因 安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装 vue-cli
cnpm install -g @vue/cli
4.安装 webpack
cnpm install -g webpack
webpack 是 JavaScript 打包器（module bundler）
创建Vue+eleme 项目
1.vue ui
2.npm i element-ui -S
3.删除 package.json 和 package-lock.json 里面的 core-js 配置信息
4.npm i core-js -S
5.yarn install
6.yarn serve
使用axios 插件请求数据
1.安装 axios
cnpm install axios -S
//说明：带--save 或 -S 意思是将其写入到package.json文件中，供拷贝代码后添加使用
2.在main.js中引入
import Axios from "axios"
Vue.prototype.$axios = Axios
3.使用：
- get请求传参
axios.get('http://rap2api.taobao.org/app/mock/23080/resources/search',{
params: {
id: 5
}
})
.then(res => {
console.log('数据是:', res);
})
.catch((e) => {
console.log('获取数据失败');
});
- post请求
this.$axios.post('http://rap2api.taobao.org/app/mock/121145/post',{
name: '小月'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});
- 一次合并发送多个请求
分别写两个请求函数，利用axios的all方法接收一个由每个请求函数组成的数组，可以一次性发送多个请求，如果全部请求成功，在
axios.spread方法接收一个回调函数，该函数的参数就是每个请求返回的结果。
function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions(){
return axios.get('/user/12345/permissions');
}
this.$axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(res1,res2){
//当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
}))
4.全局配置
//写在main.js中
axios.defaults.baseURL = 'https://api.example.com'; //URL可以少写一部分
axios.defaults.headers.common['token'] = "";
axios.defaults.headers.post['Content-Type'] = 'application/json
5.拦截器
写在main.js中：发送请求或响应（接收）请求对数据进行判断
// 拦截器
// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么，利用qs进行格式转换
if(config.method === "post"){
config.data = qs.stringify(config.data)
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
Axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
if(!response.data){
return {
msg:"数据返回不合理"
}
}
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
6.跨域问题
- 写在config文件的index.js中 配置：
proxyTable: {
'/doubai_api':{
target: 'http://api.douban.com',
pathRewrite: {
'^/doubai': ''
},
changeOrigin: true
}
}
- main.js
Vue.prototype.HOST = "/doubai_api"
- 访问：修改配置文件以后，需要重启服务器
var url = this.HOST + "/v2/movie/top250";
this.$axios({
method: 'get',
url: url
})
.then(res => {
console.log(res.data);
})
.catch(error => {
console.log(error);
})
