一. axios
1:基于promise的http库,可以用在浏览器和node.js中
2:特性
- 从浏览器中创建XMLHttpRequets
- 支持浏览器和node.js
- 支持promise API
- 拦截请求和响应
- 自动转换json数据,客户端支持防御XSRF
3:安装
npm install axios || bower install axios
4:创建实例
import axios from axios
import { MessageBox, Message } from 'element-ui'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API
timeout: 5000,
})
5:创建请求拦截和响应拦截
service.interceptors.request.use(
config=>{
}
)
service.interceptors.response.use(
response=>{
},
error=>{
Message({
message:error.message,
type:error,
duration:5*1000
})
return Promise.reject(error)
}
)
6:生成接口
import request from '@/utils/request
// 生成接口导出
export function fetchList(){
url:"url"
method:"get/post/put/delete/"
params/data
}
7:调用接口
import {fetchList} from '...'
methods:{
getList(){
fetchList().then(res=>{})
}
}
二:i18n
1:国际化(i18n),网站以不同的语言呈现
2:安装
npm install vue-i18n --save-dev
3:使用
import i18n from '@/i18n'
new Vue({
el:"#app",
i18n,
})
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en.json'
import zhCN from './zh-cn.json'
import ... from '...'
Vue.use(VueI18n)
export const defaultLang = 'zh-cn'
const il8n = new VueI18n({
local:defaultLang,
messages:{
'zh-cn':zhCN,
'en':en,
......
}
})
export default i18n
<div>{{$t('message.msg')}}</div>
data:{
msg:this.$t('message.msg');
}