搭建 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

发布了66 篇原创文章 · 获赞 30 · 访问量 28万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览