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

Пользователь

от rodger.botsford , в категории: JavaScript , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от johnpaul.blick , 7 месяцев назад

@rodger.botsford 

Чтобы запустить Vue.js приложение на Express, выполните следующие шаги:

  1. Установите Express и создайте новый проект Express:
1
2
3
4
npm install express-generator -g
express my-app
cd my-app
npm install


  1. Установите Vue.js зависимости:
1
npm install --save vue vue-router


  1. Создайте корневой компонент Vue.js в папке public/javascripts с именем App.vue:
 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. В файле app.js добавьте следующий код перед строкой app.use(express.static(path.join(__dirname, 'public')));:
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. В файле routes/index.js добавьте следующий код перед строкой router.get('/', function(req, res, next) {:
 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. В файле app.js добавьте следующий код после строки app.use('/', indexRouter);:
 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. Запустите приложение Express:
1
npm start


Теперь вы можете открыть веб-браузер и перейти по адресу http://localhost:3000, чтобы увидеть свое Vue.js приложение, запущенное на Express.