Node+Express+Vue+Element+MySQL简易实现前后端分离

1、安装node环境
具体安装教程请参考http://nodejs.cn/

2、塔建Vue前端项目
使用Vue官网提供的vue-cli脚手架vue-cli命令行工具

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack nevem
# 安装依赖，走你
$ cd nevem
$ npm install
$ npm run dev

npm install

安装所有的依赖，包括上一步骤的elementUI和vue-resource。

执行npm install安装时间会长一点，所以建议使用淘宝cnpm镜像（自行google），公司的网络已墙的请忽略。

npm run dev后页面自动弹出http://localhost:8086/#/这个页面，表明基于webpack的vue项目成功创建。

3、引入Element组件
修改src/main.js为如下代码，引入element和resource

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.config.productionTip = false
Vue.use(VueResource)
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  render:h => h(App)
})

4、安装Express
在目录nevem下新建一个文件service，用于做服务器。在里面创建如下4个文件，结构如下：