Vue.js 事始め

環境

node: v6.11.0
npm: v3.10.10

Install

下記のコマンドで package.json を作成、
webpack, vue のインストールを行う。

npm init
npm install -g webpack
npm install --save-dev vue

webpack.config.json

const path = require('path');

module.exports = {
    entry: {
        'js/main': './src/js/main.js'
    },
    output: {
        path: path.join(__dirname, 'public'),
        filename: '[name].js'
    },
+    resolve: {
+        alias: {
+            'vue$': 'vue/dist/vue.common.js'
+        }
+    }
}

npm でインストールした vue はランタイム限定ビルドのため、 完全ビルドを利用する場合は、バンドラでエイリアスを設定する必要がある(上記のコードの + 部分)。
https://jp.vuejs.org/v2/guide/installation.html#ランタイム-コンパイラとランタイム限定の違い

index.html

<div id="app">
  {{ message }}
</div>

main.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

webpack コマンドを打って、

> webpack

index.html をブラウザで開き、 Hello Vue! が画面に出力されれば OK

Hello Vue!

参考:
はじめに — Vue.js
https://goodlife.tech/web/vue-js/