Vue 项目搭建教程

本文将介绍如何创建 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封装

参考链接：Axios二次封装