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.jsvar 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-タグを1つにする 」までに対応
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確認