如何用vue cli发送请求到后端_vue系列：vue快速构建项目（A01）

一、写在前边

公司项目要做前后端分离，基本上没有犹豫就选了node+vue的组合模式，原因是这俩太太太火了，我要追随时代的潮流。

项目改版迫在眉睫，从头一点一点的学也来不及了，所以直接选用了快去构建项目的工具，天下武功唯快不破。

嗯，没错，是这么回事。

经过了一分钟激烈的思想斗争，秉承着新的就是最好的，一切都用最新的！

最后定的模式为：后端：egg（阿里开源的node.js框架）+前端：vue 全家桶（vue + vue-cli + vue-router + vuex + axios）

我也处在小白学习阶段，这些文章也算是学习笔记。目前构建项目大部分还是依靠官网demo和度娘搜索，然后照葫芦画瓢，很多东西也是按照自己的理解在描述，有不到位的请指出，请轻喷！ 另外，vue和node一些简单的基础还是要过一遍，不然真的一脸懵。 框架和脚手架让开发大大便利，但基础知识也是很重要的。

当然了，说好了快速构建，就一定要快速构建，那么前端开发框架UI库也是必不可少。

纠结了十几秒，选择了饿了么团队开发的element ui。

最终为：vue全家桶 + egg + element ui

二、环境准备 操作系统为 windows

（一）安装Node.js和npm（建议安装最新版）

1、官网下载安装包 https://nodejs.org/zh-cn/download/

（1）Windows 安装包 (.msi)

下载安装包之后点击进行安装即可。

在Windows上安装时务必选择全部组件，包括勾选Add to Path。

（2）Windows 二进制文件 (.zip)

①配置npm安装目录。

解压该文件，在解压之后的文件路径下创建两个文件夹：node_global（npm全局安装位置）和node_cache（npm 缓存路径）。

②修改环境变量

将node.exe所在目录到环境变量中。

将%NODE_PATH%和%NODE_PATH%node_global加入到Path变量中

③配置全局安装和缓存路径

npm config set prefix E:node-v12.14.1-win-x64node_global
npm config set cache E:node-v12.14.1-win-x64node_cache

记得修改为自己的为文件路径哦~

2、检测是否安装成功

npm已经在Node.js安装的时候顺带安装好了。

安装完成后，在Windows环境下，请打开命令提示符，然后输入node -v 和npm -v，输出版本号即为安装正确。

（二）vue全家桶

1、vue cli

npm install -g @vue/cli 

然后输入vue --version，输出版本号即为安装正确。

2、快速构建项目

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

根据操作，填写项目名称，选好配置，点击构建项目，等待项目初始化。

默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

在这里我们选择手动。

点击下一步，选择需要安装的（Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter、Unit Testing、使用配置文件）：

重要补充：不要选择Linter / Formatter。格式校验过于严格，改到崩溃ing…… 如何关闭格式校验？ 项目创建好后会生成 .eslintrc.js文件，找到该文件，注释掉 @vue/standard 即可。

点击创建项目，项目初始化完成之后会进入项目管理页面。

点击任务-serve-运行，之后点击启动app，可看到项目初始化页面。

至此，项目初始化已完成。

（三）element ui

• 在项目所在文件夹下运行以下命令：

npm i element-ui -S

• 在main.js中添加一下代码：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

（四）axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

• 在项目所在文件夹下运行以下命令：

npm install axios

• 在src目录下创建utils/， 并创建request.js用来封装axios

import axios from 'axios'

// 创建axios实例
const instance = axios.create({
      
  baseURL: 'http://test.apiserver.com/', // api的base_url
  timeout: 15000,                 // 请求超时时间
  headers: {
      
    'key': 'value'
  }
})

// 拦截请求
instance.interceptors.request.use(config => {
      
  // 发送请求之前做些什么
  return config
}, error => {
      
//  请求错误做些什么
  return Promise.reject(error)
})

// 拦截响应
instance.interceptors.response.use(res => {
      
  // 对响应数据做些什么
  return res
}, error => {
      
// 对响应错误做些什么
  return Promise.reject(error)
})

export default instance

• 在src/下创建api目录，用来统一管理所有的请求：

例如创建user.js：

import request from '@utils/request.js'

export default{
  login(data){
    return request({
      url:'/login/',
      method:'post',
      data,
    })
  }
}

这样的好处是方便管理、后期维护，还可以和后端的微服务对应，建立多文件存放不同模块的api。剩下的就是你使用到哪个api时，自己引入便可。

至此，前端项目所需的配置均已完成。

更多相关文章：

vue系列：vue项目目录结构详解（A02）

vue系列：常见问题与使用技巧汇总