本文将介绍如何创建 Vue 2 项目，并实现 Axios 进行二次封装，从而实现更简单的网络请求操作。
Axios 是一个基于 promise 网络请求库，作用于 node.js 和浏览器，使用简单，小巧且提供了易于扩展的接口。
一、环境安装
1. Node安装
先检查自己是否已经安装了 node ，没有的话先到官网下载之后无脑下一步即可。
node -v # 查看Node版本
npm -v # 查看NPM版本
2. cnpm安装
cnpm 是阿里的 npm镜像， npm 有时候会抽风，安装一个备用。
npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm -v # 查看cnpm版本
二、项目创建
1. 新建工程
根据你的喜好选择对应目录，新建命令行窗体运行如下命令：
mkdir vue-demo
cd vue-demo # 新建文件夹并进入
vue init webpack my-project # 初始化项目
2. 配置信息
回车之后就会下载项目模板，期间会让你输入项目描述，注意选择 ESLint 的时候记得选 no ，否则后续格式会出现奇奇怪怪的格式错误。
具体提示信息如下：
Project name <你的项目名>
Project description <你的项目描述>
Author <作者>
Vue build standalone
# 是否生成 router 目录
Install vue-router? Yes
# 是否引入 ESlint
Use ESLint to lint your code? No
# 是否生成单元测试
Set up unit tests No
# 是否生成单元测试
Setup e2e tests with Nightwatch? No
# 是否在项目创建后运行 npm install
Should we run `npm install` for you after the project has been created? (recommended) npm
三、样式引入
1. 依赖安装
这边我选择的是阿里的 Ant Design ，布局样式更方便，当然你可以选择原生样式或者其它 UI 框架。
在新建的工程目录下新建命令窗口运行如下命令：
npm i --save ant-design-vue
2. 导入配置
找到 src/main.js 文件，添加如下代码全局导入样式，当然你也可以在对应的页面里选择的单独引入。
// 全局引入样式
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
四、Axios配置
1. 依赖安装
打开之前新建的工程根目录，新建命令行窗口运行如下命令安装 Axios 。
npm install axios
2. Axios配置
这里用到的的接口是用的是 Spring Boot 编写，可以参考教程：Spring Boot接口开发。
然后在 src 目录下新建文件夹 api ，文件夹内新建文件 axios.js 用于对 axios 进行基本封装以及对相应进行简单处理，代码如下：
import Vue from 'vue';
import axios from 'axios';
function request(axiosConfig) {
const service = axios.create({
baseURL: 'http://localhost:9090', // 设置统一的请求前缀
timeout: 60000, // 设置统一的超时时长, 单位毫秒
});
service.interceptors.request.use(config => {
return config
}, err => {
console.log(err);
})
// 响应拦截
service.interceptors.response.use(res => {
return res
}, err => {
// 请求信息弹窗提示
const errorBody = err.response.data
Vue.prototype.$notification['error']({
message: 'Internal Server Error',
description: errorBody.error,
});
})
return service(axiosConfig)
}
export default request;
五、Axios封装
1. 接口封装
在api目录下新建文件 user.js ，在该文件内利用二次封装的 axios 对进行接口方法封装，这样在页面代码中我们只需引入相应的方法即可。
相应的配置示例代码如下：
import request from './axios';
export function getUser(params) {
return request({
url: '/users/get',
method: 'get',
data: params
})
}
export function Update(params) {
return request({
url: '/users/update',
method: 'post',
data: params
})
}
2. 接口调用
具体的调用封装的接口方法可以参考另一篇文章，这里不详细展开：Vue接口请求详解
六、跨域处理
找到项目下的 config/index.js 文件，在 proxyTable: {} 括号里添加如下内容，需要注意若后端配置了 servlet.context-path 前缀，这里对应的 '/' 需要改成其对应的值。
将其中的名称 your-name 替换为你需要前缀，最终的接口请求地址样式即为：http://localhost:8080/your-name/backend-api-path/。
"/your-name":{
target: 'http://localhost:9090',
changeOrigin: true,
pathRewrite: {
'^/your-name': '/'
}
}
然后回到第四步的 axios.js 文件中将 baseURL 的值替换成 /your-name。
const service = axios.create({
baseURL: '/your-name', // 设置统一的请求前缀
timeout: 60000, // 设置统一的超时时长
});
源码：Axios封装
参考链接：
