http://qiita.com/ayasuda/items/92221229e8f8c65c6f7c のページを見ながら作業して見たら、そのままでは動かなかったので色々調べて見た
作業手順
-
新規ディレクトリ作成（＋git init）
-
npm init
-
npmでvueとbrwoserifyをインストールする
npm install --save vue
npm install --save-dev browserify
4. package.json編集
```js: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!'
}
})
```html: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も必要
2. package.json編集
3. vueifyインストール
```npm install --save-dev vueify```
4. ファイル作成、components/message.vue, main2.js, index2.html作成
main2.jsは先方のmain.jsのまま。components/message.vueもそのまま。
```html: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 を読み込む行を入れておくこと。
5. vueify
./node_modules/.bin/browserify -t vueify main2.js -o bundle2.js
第4のトラップ：brwoserifyにオプションが必要
6. index2.html確認