技术细节-继续配置
提示：你以为这样就完了吗,其实还有很多东西需要我们自己手写的
例如：
- element-ui的配置
- 样式重置配置
- src使用@的配置
- elinst配置
- axios异步请求的二次封转配置
- 语言国际化配置(这个看需求,我这里就不用配置了)
- vuex的配置
- mixins的配置
- 开发环境的配置
继续:
axios异步请求的二次封转配置
这个是每一个项目中都必须要的:
首先下载axios 插件
npm i axios -S
其实在项目的src目录中新建 utils目录,然后再新建request.js
src --> utils --> request.js
代码:
import Vue from 'vue'
import axios from 'axios'
// 设置超时时长
axios.defaults.timeout = '30000'
// request拦截器
axios.interceptors.request.use((config) => {
return config
}, (error) => {
return Promise.reject(error)
})
// responese拦截器
axios.interceptors.response.use((res) => {
return res.data
}, (error) => {
Vue.$message.error(error.toString())
return Promise.reject(error)
})
/**
* 设置请求header
* @param {Object} headers
*/
const setHeader = (headers) => {
for (const key in headers) {
axios.defaults.headers[key] = headers[key]
}
}
/**
* POST请求
* @param {String} url 地址
* @param {Object} params 参数
* @param {Object} headers headers
*/
export const request= (url, params, method,headers = {}) => {
return new Promise((resolve, reject) => {
setHeader(headers)
axios({
url,
method,
data: method == 'post'? params:"",
params: method =='get'?params:""
}).then((response) => {
resolve(response.data)
}).catch((error) => {
reject(error)
})
})
}
/**
* 文件上传
* @param {String} url 地址
* @param {File} file 文件
*/
export const uploadFile= (url, file) => {
return new Promise((resolve, reject) => {
const formData = new FormData()
formData.append('file', file)
formData.append('currentDate', Date.now())
axios.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((response) => {
resolve(response.data)
}).catch((error) => {
reject(error)
})
})
}vuex的配置 (项目自动完成了)
这个项目已经配置完成
mixins的配置 (这个主要是放公共的方法)
在src目录中新建mixins文件夹,然后再新建index.js
src --> mixins ---> index.js
export default {
data() {
return {};
},
created(){
},
methods: {},
};
在使用mixins的时候要注意了: 他的方法 和 vue的方法 的先后使用问题
开发环境的配置 (这里的开发环境是指当前是 开发 , 生产, 测试)
配置如下:在项目的根目录新建三个文件
都写相同的代码:
NAME="开发环境 dev"
VUE_APP_API_URL=http://127.0.0.1 // url为不用环境的地址
小结
提示：跨域我就没有写了,这个百度就有
项目搭建完成之后,希望大家自己启动然后测试一下,有问题的哈,可以在想交流,
