http://qiita.com/ayasuda/items/92221229e8f8c65c6f7c のページを見ながら作業して見たら、そのままでは動かなかったので色々調べて見た

作業手順

新規ディレクトリ作成（＋git init）
npm init

npmでvueとbrwoserifyをインストールする

npm install --save vue
npm install --save-dev browserify

package.json編集
package.json
```
"browser": {
"vue": "vue/dist/vue.common.js"
}
```
を追加する
第1のトラップ：http://kitak.hatenablog.jp/entry/2016/12/12/140500
および https://jp.vuejs.org/v2/guide/installation.html#ランタイム-コンパイラとランタイム限定の違い

main.js, index.html作成

main.js

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

index.html

<html>
<head>
<title>Hello, World.</title>
</head>
<body>
<div id="app">
  {{ message }}
</div>
</body>
<script type="text/javascript" src="./bundle.js"></script>
</html>

./node_modules/.bin/browserify main.js -o bundle.js
index.html確認

ここまでで「http://qiita.com/ayasuda/items/92221229e8f8c65c6f7c#browserify-を用いscript-タグを１つにする」までに対応

gulpは特に必須ではないので無視。Babelは必要

Babelのインストール
```
npm install --save-dev babelify babel-preset-es2015 babel-plugin-transform-runtime
```
第2のトラップ：babelにbabel-plugin-transform-runtimeも必要
package.json編集
vueifyインストール
npm install --save-dev vueify
ファイル作成、components/message.vue, main2.js, index2.html作成
main2.jsは先方のmain.jsのまま。components/message.vueもそのまま。
index2.html
```
<html>
<head>
<title>Hello, World.</title>
</head>
<body>
<div id="app">
  <my-message></my-message>
</div>
</body>
<script type="text/javascript" src="./bundle2.js"></script>
</html>
```
第3のトラップ：index2.htmlに bundle を読み込む行を入れておくこと。
vueify
./node_modules/.bin/browserify -t vueify main2.js -o bundle2.js
第4のトラップ：brwoserifyにオプションが必要
index2.html確認

veuify + browserify

作業手順