1,配置router和vuex
npm i vuex@next vue-router
①:配置router
main.ts中
②:配置vuex
main.ts中
2,集成elementui-plus npm i element-plus
全局引用或按需引入参考官网
按需以内plugins注意要放在configureWebpack里,不然会报错“plugins” is not allowed,这里官网未提示
3,axios 基本使用及封装 npm i axios
基本使用
//axios导出的就是一个实例对象,可以直接使用上面的方法
import axios from 'axios'
axios.defaults.baseURL = 'http://httpbin.org'
//1, axios第一种发请求的方式
axios.request({
method: 'GET',
url: '/get',
})
//2, 模拟get请求,传入参数 params参数会被转换为query参数形式发送
axios
.get('/get', {
params: {
name: 'zs',
age: '18',
},
})
.then((res) => {
console.log(res)
})
//3, 模拟post请求 data中的参数会作为params参数发送,同时post请求还支持query类型的参数
axios
.post('/post', {
data: {
name: 'zs',
age: '18',
},
})
.then((res) => {
console.log(res)
})
//4, axios.all 使用场景:当我们发送多个请求时希望多个请求的数据同时回来。得到的是一个数组,数组中是AxiosResponse类型的数据
axios
.all([
axios.get('/get', { params: { name: '张三', age: 18 } }),
axios.post('/post', { data: { name: '张三', age: 18 } }),
])
.then((res) => {
console.log(res)
})
//5, axios的拦截器,f1为请求/响应成功的回调,f2为请求/响应失败的回调,可以省略
axios.interceptors.request.use(
(config) => {
//想做的操作
//如,添加token
//添加请求动画
return config
},
(err) => {
console.log(`请求发送失败${err}`)
}
)
axios.interceptors.response.use(
(res) => {
console.log('请求拦截成功')
return res.data //.data中才是服务器返回的数据
},
(err) => {
console.log('服务器响应失败')
return err
}
)
// Promise本身可以有类型<number>可以限制resolve,resject的参数类型和then后res的参数类型,必须保持一致
new Promise<number>((resolve) => {
resolve(555)
}).then((res) => {
console.log(res)
})
4,配置环境变量
环境变量就是在不同的环境下,赋予变量不同的值,来区分当前的开发环境
方式一:
方式二:一般常用
方式三:利用多个.env文件,文件名不能变(最方便),编译器会自动识别当前环境并把环境变量注入 vscode安装DotENV扩展可以支持.env文件的语法高亮
注意:在这种方式下可以使用 BASE_URL NODE_ENV这些系统自带的变量名 ,也可以自定义名字必须VUE_APP_开头 : VUE_APP_(自定义变量名)
项目中读取环境变量的值时使用 process.env.环境变量名
如:console.log(process.env.VUE_APP_DIY)