「old/vue.js/setup browserfy」の版間の差分

提供: 個人的記録
移動: 案内検索
(vue.js のセットアップ)
38行目: 38行目:
 
<pre>
 
<pre>
 
npm install --save-dev browserify
 
npm install --save-dev browserify
 +
</pre>
 +
* 以下のコマンドでbrowserifyのインストールパスを確認する。おそらく<code>node_modules\.bin</code>になっているはず。
 +
<pre>
 +
npm bin
 
</pre>
 
</pre>

2017年8月6日 (日) 12:54時点における版

セットアップ

前提

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