前置条件

请确保安装了node。window+R打开cmd，输入 node -v  查看node版本。

建议使用淘宝镜像代替npm，确保安装速度，接下来都会使用cnpm

一、搭建后台Express环境

1、安装环境

新建一个Express文件夹，之后的操作都在这个文件夹里操作，确保能找到你的项目

在此使用shift+鼠标右键打开cmd

全局安装Express

cnpm install express --save

安装Express应用程序生成器

cnpm install express-generator -g

创建一个名称为 myapp 的 Express 应用

express --view=pug myapp

成功的例子：

之后在你的Express文件夹中会有一个myapp的文件夹，这就是我们的express项目文件

进入myapp安装依赖

1. cd myapp
2. cnpm install

启动应用

set DEBUG=myapp:* & npm start

成功：

在浏览器中输入 http://localhost:3000/ 如下图，成功创建了一个express应用

2、发送GET请求

在你的编辑器中打开myapp

目录：（因为我已经有一个myapp了，所以叫myapp2）

在routes新建一个produce.js

1. var express = require('express');
2. var router = express.Router();
3. /* GET home page. */
4. router.get('/', function(req, res, next) {
5. var data={
6. code:0,
7. data:{name:'aaa',pwd:'123'},
8. isSuccess:true,
9. msg:"请求成功"
10. }
11. //将product视图与指定的对象渲染后输出到客户端
12. res.json(data);
13. });
14. module.exports = router;

app.js中添加

1. var productRouter = require('./routes/product');
2. app.use('/product', productRouter);

重启一下应用，浏览器输入 http://localhost:3000/product ，可以看到请求成功。

二、搭建VUE环境并接受请求

在这里我使用vue-cli搭建vue环境

打开cmd，安装vue-vli

cnpm install vue-cli -g

进入刚才创建的Express文件夹，在文件夹用shift+鼠标右键或者cd 进入

创建自己的vue项目

vue init webpack vueProject

接下来会让你选择，在这里不多做解释。一直回车Y即可。

创建成功：

myapp是我们的后端express项目，vueProject是我们的前端vue项目。大体的框架已经搭建完成了，接下来需要把前后端连接起来。

进入vueProject，启动项目

npm run dev

启动成功，在浏览器输入 http://localhost:8080/

安装axios

cnpm install axios

在main.js中引入并发送请求

1. import axios from 'axios'
2. var url="http://localhost:3000"
3. axios.get(url+'/product')
4. .then(function (response) {
5. console.log(response);
6. })
7. .catch(function (error) {
8. console.log(error);
9. });

打开f12可以看到请求接收成功