Как запустить vue.js приложение на express?

1
2
3
4

npm install express-generator -g
express my-app
cd my-app
npm install

1

npm install --save vue vue-router

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

  
    Hello, World!
  



export default {
  name: 'App',
}



h1 {
  color: blue;
}

1
2
3
4
5

var vueMiddleware = require('express-vue-middleware');
var Vue = require('vue');
var renderer = require('vue-server-renderer').createRenderer();

app.use(vueMiddleware({ Vue, renderer }));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

var Vue = require('vue');
var renderVueComponentToString = require('vue-server-renderer/basic').createRenderer().renderToString;
var App = require('../public/javascripts/App.vue');

router.get('/api', function(req, res, next) {
  var app = new Vue({
    render: function(createElement) {
      return createElement(App);
    },
  });

  renderVueComponentToString(app, function(error, html) {
    if (error) {
      console.error(error);
      return res.status(500).end('Internal Server Error');
    }

    res.json({ html: html });
  });
});

1

<%- JSON.stringify(html) %>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

app.get('/', function(req, res, next) {
  var Vue = require('vue');
  var createRender = require('vue-server-renderer').createRenderer;
  var App = require('./public/javascripts/App.vue');

  var context = {
    title: 'Vue.js + Express',
  };

  var app = new Vue({
    render: function(createElement) {
      return createElement(App);
    },
  });

  createRender().renderToString(app, context, function(error, html) {
    if (error) {
      console.error(error);
      return res.status(500).end('Internal Server Error');
    }

    res.render('index', {
      title: context.title,
      html: html,
    });
  });
});

1

npm start