Vue 單文件配置
1.安裝npm
npm 全程為Node Package Manager,是一個基于Node.js的包管理器塞绿，也是整個Node.js社區(qū)最流行效五、支持的第三方模塊最多的包
2.由于網(wǎng)絡(luò)原因 安裝 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）
創(chuàng)建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 插件請求數(shù)據(jù)
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('數(shù)據(jù)是:', res);
})
.catch((e) => {
console.log('獲取數(shù)據(jù)失敗');
});
- 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);
});
- 一次合并發(fā)送多個請求
分別寫兩個請求函數(shù)，利用axios的all方法接收一個由每個請求函數(shù)組成的數(shù)組纵隔，可以一次性發(fā)送多個請求，如果全部請求成功诡渴，在
axios.spread方法接收一個回調(diào)函數(shù)竿音，該函數(shù)的參數(shù)就是每個請求返回的結(jié)果。
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){
//當(dāng)這兩個請求都完成的時候會觸發(fā)這個函數(shù)窄坦，兩個參數(shù)分別代表返回的結(jié)果
}))
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中：發(fā)送請求或響應(yīng)（接收）請求對數(shù)據(jù)進(jìn)行判斷
// 攔截器
// 添加請求攔截器
Axios.interceptors.request.use(function (config) {
// 在發(fā)送請求之前做些什么唤反，利用qs進(jìn)行格式轉(zhuǎn)換
if(config.method === "post"){
config.data = qs.stringify(config.data)
}
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 添加響應(yīng)攔截器
Axios.interceptors.response.use(function (response) {
// 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
if(!response.data){
return {
msg:"數(shù)據(jù)返回不合理"
}
}
return response;
}, function (error) {
// 對響應(yīng)錯誤做點(diǎn)什么
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"
- 訪問：修改配置文件以后，需要重啟服務(wù)器
var url = this.HOST + "/v2/movie/top250";
this.$axios({
method: 'get',
url: url
})
.then(res => {
console.log(res.data);
})
.catch(error => {
console.log(error);
})
