搭建一个VUE+Express前后端分离的开发环境

前置条件

请确保安装了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安装依赖

cd myapp
cnpm install

启动应用

set DEBUG=myapp:* & npm start

成功：

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

2、发送GET请求

在你的编辑器中打开myapp

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

在routes新建一个product.js

var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
	var data={
		code:0,
		data:{name:'aaa',pwd:'123'},
		isSuccess:true,
		msg:"请求成功"
	}
	res.json(data);
});

module.exports = router;

app.js中添加

var productRouter = require('./routes/product');

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中引入并发送请求

import axios from 'axios'
var url="http://localhost:3000"
axios.get(url+'/product')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

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