搭建 vue+express 框架模板

前端模板渲染vue，后端express提供接口服务，合并成一个项目。同样是前后端分离，互不影响。
项目发布只是把vue经过webpack打包当做express的静态文件夹发布

首先使用脚手架搭建vue项目详细方法

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ cnpm install express morgan body-parser element-ui ejsexcel echarts  async sequelize pg pg-hstore tedious  mysql2 node-uuid axios node-cache  --save

我使用的是淘镜像cnpm来安装跟npm一样方法

1. express morgan 基于 Node.js 平台，快速、开放、极简的 web 开发框架。官网
2. body-parser 一个接受get body参数的中间件 （req.body.name，req.body.query这样获取）
3. element-ui Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库官网
4. ejsexcel 导出excel的包 项目需要导出可以用用
5. echarts 这个百度图表用的
6. async 类似promise 流程控制 异步同步用的包
7. sequelize pg pg-hstore tedious mysql2 查询mysql SQL Server用的ORM数据框架
8. node-uuid 生成唯一id用的 可以不要 因为sequelize里面自带
9. axios、vue里面类似ajax
10. node-cache node里面做简单key—value缓存用的

接下来是设置express,下面是设置express服务的代码，我们知道使用express脚手架会自动使用EJS、Handlebars等服务端渲染模板，额我们只是使用它的路由已经创建http服务功能，原来express的app.js、bin\www,已经routes保留。

1. 1.首目录创建app.js,
2. 创建bin文件夹 里面新建文件www
3. 创建routes目录配置服务端基于RESTful api路由
   文件代码
   源代码

在 app.js我们需要将

app.use(express.static(path.join(__dirname, 'pubilc')));
//修改成
app.use(express.static(path.join(__dirname, 'dist')));

这个表示，当vue项目进行build打包后会生成dist目录，express会将这个目录处理成静态文件目录
其他的 参考我的源代码。

这个时候我们在routes目录中写个接受get请求，返回json数据的例子

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

router.get('/getinfo', function (req, res, next) {
  res.json({id:1,name:"张三"})
});
module.exports = router

这里当然可以使用数据库查询或者其他。

然后我们在新建的HelloWorld.vue中进行get请求

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      msg2:'',
    }
  },
  mounted(){
    this.getinfo();
  },
  methods:{
      getinfo(){
        this.$http.get('/api/getinfo').then((response) => {
          this.msg2=response.data
        })
      }
  }
}
</script>

这个this.$http我们已经在main.js设置好了

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$http = axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

现在遇到一个问题，express服务使用的是3030端口，vue使用的8080端口，由于跨域所以要配置好vue-cli的proxyTable 选项,位于config/index.js,改写proxyTable.

 dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:3030',
        changeOrigin: true
      }
    },

这样我们使用npm run dev 启动vue，使用npm start或者node bin\www启动express服务

接下来是打包了发布了

使用命令
npm run build
然后会生成dist文件夹

我们直接将项目copy到服务器上，跟发布后端express一样，src可以不发布，可以直接拷贝打包后的dist到服务器上，然后pm2管理项目可以看我其他文章

如有问题可以加群315552185询问
源代码在github上地址
https://github.com/harryluo163/express_vue