如何快速搭建一个完整的vue2+element-ui的项目-二

技术细节-继续配置

提示：你以为这样就完了吗,其实还有很多东西需要我们自己手写的

例如：

• 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为不用环境的地址

小结

提示：跨域我就没有写了,这个百度就有

项目搭建完成之后,希望大家自己启动然后测试一下,有问题的哈,可以在想交流,