技术细节-继续配置
提示：你以为这样就完了吗,其实还有很多东西需要我们自己手写的
例如：
- 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为不用环境的地址
小结
提示：跨域我就没有写了,这个百度就有
项目搭建完成之后,希望大家自己启动然后测试一下,有问题的哈,可以在想交流,
)
