Webpack + vue-loader

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

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

npm init --yes

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

"devDependencies": {
	"babel-core": "^6.18.2",
	"babel-loader": "^6.2.7",
	"babel-plugin-transform-runtime": "^6.15.0",
	"babel-preset-es2015": "^6.18.0",
	"css-loader": "^0.25.0",
	"vue": "^1.0.27",
	"vue-html-loader": "^1.2.3",
	"vue-loader": "^8.5.2",
	"vue-style-loader": "^1.0.0",
	"webpack": "^1.13.3"
}

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

npm install

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

"scripts": {
	"build": "webpack main.js build.js --watch"
},

build - нужен для ручной сборки проекта
webpack - сборщик проекта
main.js - входной файл
build.js - выходной файл
--watch - наблюдать за изменениями

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

npm run build

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

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

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

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

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

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

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

new Vue({
    el: '#app',
    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>

Browserify + Vueify

Vue-cli