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

前置条件 请确保安装了node。window+R打开cmd，输入 node -v  查看node版本。 建议使用淘宝镜像代替npm，确保安装速度，接下来都会使用cnpm 1、搭建后台Express环境 一、安装环境 新建一个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应用 二、发送GET请求 在你的编辑器中打开myapp 目录：（由于我已经有一个myapp了，因此叫myapp2） 在routes新建一个produce.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:"请求成功"   }   //将product视图与指定的对象渲染后输出到客户端   res.json(data);   });       module.exports = router;   app.js中添加   var productRouter = require('./routes/product');       app.use('/product', productRouter);   重启一下应用，浏览器输入 http://localhost:3000/product ，能够看到请求成功。 2、搭建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能够看到请求接收成功