专业网站发展趋势,商务网站建设教程,房地产中介网站建设,自己网上怎么接单技术细节-继续配置 提示#xff1a;你以为这样就完了吗,其实还有很多东西需要我们自己手写的 例如#xff1a; element-ui的配置样式重置配置src使用的配置elinst配置axios异步请求的二次封转配置语言国际化配置(这个看需求,我这里就不用配置了)vuex的配置mixins的配置开发环… 技术细节-继续配置 提示你以为这样就完了吗,其实还有很多东西需要我们自己手写的 例如 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_URLhttp://127.0.0.1 // url为不用环境的地址 小结
提示跨域我就没有写了,这个百度就有
项目搭建完成之后,希望大家自己启动然后测试一下,有问题的哈,可以在想交流,
