Как совместить node и vue?

Question

[last_round]

Помогите кто знает. У меня есть набор файлов (на скрине видно) . Мне интересно как можно подключить vue через browserify к проекту на nodeJs. В app.js простое создание сервера (express)

var express = require('express'),
	bodyParser = require('body-parser'),
	app = express();

app.use( bodyParser.urlencoded({ extended: true }) );
app.use( bodyParser.json() );

var post = [
	{
		title: 'my first post',
		status: 'low'
	},
	{
		title: 'my second post',
		status: 'low'
	}
]

app.get( '/', function(req, res){
	res.render('index.vue', post);
} );

app.listen(3000, function(){
	console.log('This server working on 3000 port');
});

.
Также у меня есть main.js (точка входа для vue) которые конвертируется в build.js и как можно в App.js засунуть подключение build.js чтобы отрендередь index.vue.

Comments

[Cartman]

А что это за IDE?

[last_round]

Cartman, это не IDE, это текстовый редактор Brackets

Answer 1

[Антон]

https://ru.nuxtjs.org/

Answer 2

[Александр Аксентьев]

Почему нода должна рендерить Вью?
Это же фронт, а нода бек.

Нода отдает данные и "пустую" страницу с подключением app.js
Это все что должна сделать нода.

Comments

[Евгений]

Vue поддерживает SSR, поэтому нода может рендерить vue)

[Александр Аксентьев]

Евгений: только ТС делает на SSR похоже, а пытается сделатьиз vue бекенд

[last_round]

Твои слова натолкнули на решение.

Answer 3

[Дмитрий Беляев]

Устанавливаем https://www.npmjs.com/package/vue-template-compiler
npm i -S vue-template-compiler

Патчим require:

'use strict';

const fs = require('fs');
const compiler = require('vue-template-compiler');

require.extensions['.vue'] = (module, filename) => {
    let file = fs.readFileSync(filename, 'utf8');
    let {script, template} = compiler.parseComponent(file);
    let {render, staticRenderFns} = compiler.compile(template.content);
    let result = `(function(){'use strict';${script.content}})();Object.assign(module.exports,{render:function(){${render}},staticRenderFns:[${staticRenderFns.map(code => {
        return `function(){${code}}`;
    }).join(',')}]});`;
     module._compile(result, filename);
};

после этого можем подключать компоненты .vue через обычный require как в webpack/browsiritynew Vue(require('./App.vue'))

P.S. проверено в render процессе электрона, но в node тоже должно работать

Answer 4

[Klein Maximus]

https://ssr.vuejs.org/ru/