Browserify + Vueify

Browserify - сборщик пакетов, главной особенностью являеися возможность разбивать приложение на отдельные модули и писать их так как это удобно нам а не браузеру. Когда приложение будет готово нужно будет лишь запустить небольшой скрипт - дальше сборщик сделает всё сам.

Vueify - трансформер, который позволяет вынести компоненты в отдельные файлы но и хранить вместе с ними нужные стили и шаблоны. В результате если потребуется что-то изменить в компоненте, то потребуется открыть лишь 1 файл а не искать по всем файлам.

Настройка системы

Теперь установим и настроим систему. При помощи команды ниже создадим файл package.json.

npm init --yes

Внутри созданнного файла создадим список нужных зависимостей.

"devDependencies": {
	"browserify": "*",
	"vue": "^1.0.24",
	"vue-template-compiler": "^2.1.6",
	"vueify": "^8.4.1",
	"watchify": "^3.7.0"
}

Теперь выполнив команду - автоматически установим нужные зависимости

npm install

Для того чтобы проект собирался и автоматически компилировался добавим в секцию scripts файла package.json следующие команды:

"scripts": {
	"build": "browserify -t vueify -e main.js -o build.js",
	"watch": "watchify -t vueify -e main.js -o build.js"
}

build - нужен для ручной сборки проекта.
-t vueify - при сборке использовать трансформер vueify
-e main.js - имя файла которое преобразовывается
-o build.js - имя итогового файла
watchify - автокомпиляция при изменениях

Запуск проекта

npm run build
npm run watch

Создание компонентов

Создадим папку components а в ней новый компонент hello.vue.

<template>
    <h1>{{ greeting }}</h1>
</template>

<script>
    module.exports = {
        data: function() {
            return {
                greeting: 'Hello Vueify!'
            }
        }
    }
</script>

<style>
    h1 {
        font-family: 'Roboto', sans-serif;
        color: green;
    }
</style>

Создадим файл main.js - который будет использовать компонент

var Vue = require('vue')
var hello = require('./components/hello.vue')

new Vue({
    el: 'body',
    components: {
        hello: hello
    }
})

Использование компонентов

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <hello></hello>
    <script src="build.js"></script>
</body>
</html>

Основы

Webpack + vue-loader