0

Информации по фреймворку vue.js достаточно много, но одно абсолютно не понятно, как обеспечивается взаимодействие Node.js и Vue.js для разработки веб приложения.

С Express.js все более менее ясно, можно создать простой index.js со следующим содержанием:

var express = require('express');
var application = express();

application.set('views', 'views')
application.set('view engine', 'hjs')

application.get('/', function (req, res) {
    res.render('index', { title: 'Hey', message: 'Hello there!'});
});

application.listen(80, function () {
    console.log('Example app listening on port 80!');
});

И сделать запуск

node index.js

Запустится простой сервер на базе веб-фреймворка Express.js с возможностью его дальнейшего расширения. А с помощью генератора приложений, можно сформировать каркас проекта, и также его запустить.

В тоже время, с помощью vue-cli можно сделать аналогичный каркас, однако как запустить не совсем ясно.

Т.к. vue.js можно подключить через script в html, то могу предположить, что его можно использовать подключив в шаблоне views express.js, но тогда не ясно как проект должен выглядеть.

Таким образом, общий вопрос звучит так: как организовать проект node.js + vue.js для целей веб-разработки (сайта), что он из себя должен представлять и как его запускать.

1 ответ 1

2

Для простых тестов просто подключайте через cdn и не парьтесь.

Для разворачивания Что твориться у меня (ubuntu 16.04, php 7.0, apache 2.4, mariaDB, nodejs 7.4.0, npm 3.10.10). В созданой папке выполняю команду npm init, далее вношу необходимые данные и npm install. Дальше npm install vue --save, таким образом добавляем через npm vue. Далее создаю папку js и в ней файл app.js в котором подключаю Vue import Vue from 'vue'. Потом устанавливаем webpack (локально или глобально), выполняем его настройки (создаём в корне проекта файл webpack.config.js примерного содержания

'use strict';

module.exports = {
    context: __dirname + '/js',
    entry: __dirname + '/js/app',
    output: {
        filename: "/js/build.js"
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            }
        ]
    }
}; 

) и далее для сборки отдельных vue templates загружаем vue-loader npm install vue-loader --save-dev. После написания кода в app.js и подключения темплейтов (и мгногого другого) запускаем команду webpack (для production webpack -p) он создаст файл (в моём случае build.js) и подключаем его в наш проект через <script src="/js/build.js">

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.