从零搭建express + vue开发环境

往下看之前，先确保你的机器上已经安装过 node，可以用 node -v 来确认下

一、express框架和vue框架介绍

express框架是一个基于node.js的web应用框架，它能够帮你创建一个从前端到后端功能完整的网站；
vue是一个流行的前端框架，它主要是用来构建用户界面的，并且具有组件化，响应式等特点；
所以，可以这样理解：express负责后端，vue负责前端，它俩之间使用HTTP来进行数据交换

二、开始搭建

1. 后端 - express环境搭建

• 我们利用 express-generator 脚手架来快速生成我们的express项目
  全局安装 express-generator npm install express-generator -g
  然后用 express --version 来检测一下是否安装成功
• 创建express项目
  express express_app 该命令即创建了一个名为 express_app 的 express 项目
  项目目录如下：
  
  因为express_app负责后端，因此我将其放在了/server目录下
  进入到express_app目录下，执行 npm install 即可安装项目所需的依赖模块，然后就会生成 node_modules 目录，存放的都是下载的依赖模块
• bin 目录下有一个 www 文件，用来启动项目，默认监听3000端口
• public 目录下存放静态文件（images, js, css）
• routes 目录下存放路由文件，路由就是用来确定URL和资源的对应关系的，这里面的代码主要用来接收前端的请求，然后进行响应
• views 目录存放模板引擎文件，这里面的文件最终会渲染为html页面
• app.js 文件是整个项目的入口文件，在这里面引入一些项目需要的模块，创建 express 实例，进行总体路由设置等等
• package.json 是依赖包描述文件，这里面有的依赖包可以通过 npm install 一键安装
• package-lock.json 是在执行完 npm install 后生成的，里面是已经安装的依赖包的详细描述，需要上传到 git 上，以保证其他人在 install 的时候，大家的依赖版本相同

现在我们执行命令 npm start 启动我们的项目，然后浏览器访问 http://localhost:3000/
就会看到如下页面：

然后我们在routes目录下新建一个 get_article_list.js 文件，内容如下：

var express = require('express');
var router = express.Router();

router.get('/'