「old/vue.js/setup browserfy」の版間の差分
提供: 個人的記録
| 43行目: | 43行目: | ||
npm bin | npm bin | ||
</pre> | </pre> | ||
| + | * index.htmlを以下のように記述する。 | ||
| + | <pre> | ||
| + | <html> | ||
| + | <head> | ||
| + | <title>TEST</title> | ||
| + | </head> | ||
| + | <body> | ||
| + | <div id="app"> | ||
| + | {{ message }} | ||
| + | </div> | ||
| + | </body> | ||
| + | <script type="text/javascript" src="./bundle.js"></script> | ||
| + | </html> | ||
| + | </pre> | ||
| + | * main.jsに以下のように記述する。(最初に記述したindex.htmlからjavascript部分の切り出し) | ||
| + | <pre> | ||
| + | var Vue = require('vue') | ||
| + | new Vue({ | ||
| + | el: '#app', | ||
| + | data: { | ||
| + | message: 'TEST' | ||
| + | } | ||
| + | }); | ||
| + | </pre> | ||
| + | * 以下のコマンドを実行し、main.jsをコンパイルする。 | ||
| + | <pre> | ||
| + | node_modules\.bin\browserify main.js -o bundle.js | ||
| + | </pre> | ||
| + | * index.htmlをブラウザで表示し、「TEST」と表示されればコンパイルは正常にできている。 | ||
2017年8月14日 (月) 08:01時点における版
セットアップ
前提
node.jsの環境がインストール済みであること。
vue.js のセットアップ
- 適当にプロジェクト用のディレクトリを作成して移動する。
- 下記のコマンドでプロジェクトを初期化する。
npm init
- なにかいろいろ聞かれるけど、とりあえず全部entrtでデフォルトのまま使う。
- 下記のコマンドでvueをインストールする。
npm install --save vue
- テストのために以下の内容のhtmlファイルを作成し、ブラウザで参照する。「TEST」と出れば正常にvueがinstallされている。
<html>
</head>
<title>TEST</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'TEST'
}
})
</script>
</html>
browserifyのインストール
このままではブラウザで表示するたびにvue.jsのコンパイルが走ってよろしくない。
事前コンパイルを行うbrowserifyをインストールする。
- 以下のコマンドを実行し、browserifyをインストールする。
npm install --save-dev browserify
- 以下のコマンドでbrowserifyのインストールパスを確認する。おそらく
node_modules\.binになっているはず。
npm bin
- index.htmlを以下のように記述する。
<html>
<head>
<title>TEST</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript" src="./bundle.js"></script>
</html>
- main.jsに以下のように記述する。(最初に記述したindex.htmlからjavascript部分の切り出し)
var Vue = require('vue')
new Vue({
el: '#app',
data: {
message: 'TEST'
}
});
- 以下のコマンドを実行し、main.jsをコンパイルする。
node_modules\.bin\browserify main.js -o bundle.js
- index.htmlをブラウザで表示し、「TEST」と表示されればコンパイルは正常にできている。
