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

提供: 個人的記録
移動: 案内検索
(セットアップ)
(vueifyのインストール)
121行目: 121行目:
  
 
=== vueifyのインストール ===
 
=== vueifyのインストール ===
 +
vueの単一ファイルコンポーネントを使えるとコンポーネント物をコンポーネントで管理できるようになる。単一ファイルコンポーネントのコンパイルも取り扱うためにvueifyを導入する。
 +
* 以下のコマンドでvueifyをインストールする。
 +
<pre>
 +
npm install vueify
 +
</pre>
 +
* さっきまで使ってたサンプルからテキスト部分を切り離し、text.vueという名前で以下のファイルを作成する。
 +
</pre>
 +
<template>
 +
  <p>{{message}}</p>
 +
</template>
 +
 +
<script>
 +
Vue.component ('text', {
 +
    props: {
 +
        data: "TEST"
 +
        }
 +
    }
 +
);
 +
</script>
 +
</pre>

2017年8月14日 (月) 11:00時点における版

セットアップ

前提

node.jsの環境がインストール済みであること。

参考url

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」と表示されればコンパイルは正常にできている。

gulpのインストール

node.jsではmakeに相当するものとして、gulpがある。
ソースファイルは機能単位に分割したいので、ファイルが増加したときにそなえてgulpをセットアップする。

  • 以下のコマンドでgulpをインストールする。
npm install gulp
npm install vinyl-source-stream
  • gulpでは vinly という形式のデータを対象に操作を行うらしい。browserify の出力結果はvinlyではないためそのままではgulpでは扱うことができないため、streamからvinlyに変換するために、vinly-source-streamが必要になるようだ。
  • makefileに相当するのが、gulpfile.jsである。さきほどの、main.jsをコンパイルするgulifile.jsとして以下のように記述する。
//以下、コマンドの定義
var gulp       = require('gulp')
var browserify = require('browserify')
var source     = require('vinyl-source-stream')

//タスクの定義。buildという名前でタスクを定義する。
gulp.task('build', function() {
  browserify({
    'entries': ['./main.js']    // browserifyに渡すソースファイルを配列で定義
  })
  .bundle() //ファイルを1ファイルにまとめる。
  .pipe(source('bundle.js')) // まとめた結果にbundle.js という名前を指定する。
  .pipe(gulp.dest('./')); // ./にまとめた結果を出力する。
});

//デフォルトタスクの指定
gulp.task('default', ['build']); 
  • 以下のコマンドででgulpを実行し、コンパイルできるかの確認を行う。
node_modules\.bin\gulp build
  • node.jsのコンソールでは package.json にスクリプトの記述ができる。gulpの実行を楽にするため、以下のようにbuildスクリプトを追記する。
"scripts": {
    "build": "gulp build"
  }
  • json形式での定義の中に、scriptsという定義(なければ追加)があるので、そこに"build"という名前で定義している。
  • buildという名前で定義したスクリプトは以下の形式で実行する。
npm run build

vueifyのインストール

vueの単一ファイルコンポーネントを使えるとコンポーネント物をコンポーネントで管理できるようになる。単一ファイルコンポーネントのコンパイルも取り扱うためにvueifyを導入する。

  • 以下のコマンドでvueifyをインストールする。
npm install vueify
  • さっきまで使ってたサンプルからテキスト部分を切り離し、text.vueという名前で以下のファイルを作成する。

</pre> <template>

テンプレート:message

</template>

<script> Vue.component ('text', {

   props: {
       data: "TEST"
       }
   }

); </script> </pre>