2021年3月27日 (土) 21:27時点における最新版

セットアップ

前提

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

参考url

http://qiita.com/ayasuda/items/92221229e8f8c65c6f7c

vue.js のセットアップ

適当にプロジェクト用のディレクトリを作成して移動する。
下記のコマンドでプロジェクトを初期化する。

npm init

なにかいろいろ聞かれるけど、とりあえず全部enterでデフォルトのまま使う。

下記のコマンドでvueをインストールする。

npm install 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 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」と表示されればコンパイルは正常にできている。
ブラウザ側で以下のようなエラーが発生することがある。このエラーは、コンパイル時にvue.jsが結合できていないときに発生する。

You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

package.json に以下の記述を追加し、結合するvue.jsを指定する。

  "browser": {
    "vue": "vue/dist/vue.common.js"
  },

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

balelのインストール

ES6でjavascriptを記述するため、babelをインストールする。

以下のコマンドを実行し、babelをインストールする。

npm install babelify babel-preset-es2015 
npm install babel-plugin-transform-runtime

package.jsonにbrowserifyの設定が必要みたいなことが参考もとに書かれているが、書くとなんかうまく動かないので書かない。

vueifyのインストール

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

以下のコマンドでvueifyをインストールする。

npm install vueify

gulpからvueifyを使用できるように、gulpfile.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に渡すソースファイルを配列で定義
    'transform': ['vueify']    // vueifyでの変換を指定
  })
  .bundle() //ファイルを1ファイルにまとめる。
  .pipe(source('bundle.js')) // まとめた結果にbundle.js という名前を指定する。
  .pipe(gulp.dest('./')); // ./にまとめた結果を出力する。
});

//デフォルトタスクの指定
gulp.task('default', ['build']);

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

<template>
  <p>{{message}}</p>
</template>

<script>
export default {
    data() {
        return {
            "message":"TEST"
        }
    }
}
</script>

index.htmlはテンプレート部分が不要になったので以下の内容に変更

<html>
  <head>
    <title>TEST</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script type="text/javascript" src="./bundle.js"></script>
</html>

main.jsを以下のように変更

const Vue = require('vue');
const App = require('./text.vue');
const app = new Vue({
    render: function(createElement) {
        return createElement(App);
    },
}).$mount('#app')

変更後、gulpでコンパイルしブラウザで表示確認を行う。

@@ 1行目: / 1行目: @@
-[[Category:Software]]
+[[Category:old/vue.js]]
 = セットアップ =
 == 前提 ==
 node.jsの環境がインストール済みであること。
+== 参考url ==
+* http://qiita.com/ayasuda/items/92221229e8f8c65c6f7c
 == vue.js のセットアップ ==
 * 適当にプロジェクト用のディレクトリを作成して移動する。
 * 下記のコマンドでプロジェクトを初期化する。
 <pre>npm init</pre>
-: なにかいろいろ聞かれるけど、とりあえず全部entrtでデフォルトのまま使う。
+: なにかいろいろ聞かれるけど、とりあえず全部enterでデフォルトのまま使う。
 * 下記のコマンドでvueをインストールする。
-<pre>npm install --save vue</pre>
+<pre>npm install vue</pre>
 * テストのために以下の内容のhtmlファイルを作成し、ブラウザで参照する。「TEST」と出れば正常にvueがinstallされている。
 <pre>
@@ 37行目: / 39行目: @@
 * 以下のコマンドを実行し、browserifyをインストールする。
 <pre>
-npm install --save-dev browserify
+npm install browserify
 </pre>
 * 以下のコマンドでbrowserifyのインストールパスを確認する。おそらく<code>node_modules\.bin</code>になっているはず。
@@ 72行目: / 74行目: @@
 </pre>
 * index.htmlをブラウザで表示し、「TEST」と表示されればコンパイルは正常にできている。
+* ブラウザ側で以下のようなエラーが発生することがある。このエラーは、コンパイル時にvue.jsが結合できていないときに発生する。
+<pre>
+You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. </pre>
+* package.json に以下の記述を追加し、結合するvue.jsを指定する。
+<pre>
+  "browser": {
+    "vue": "vue/dist/vue.common.js"
+  },
+</pre>
 === gulpのインストール ===
@@ 106行目: / 117行目: @@
 node_modules\.bin\gulp build
 </pre>
+* node.jsのコンソールでは package.json にスクリプトの記述ができる。gulpの実行を楽にするため、以下のようにbuildスクリプトを追記する。
+<pre>
+"scripts": {
+    "build": "gulp build"
+  }
+</pre>
+:* json形式での定義の中に、scriptsという定義(なければ追加)があるので、そこに"build"という名前で定義している。
+* buildという名前で定義したスクリプトは以下の形式で実行する。
+<pre>
+npm run build
+</pre>
+=== balelのインストール ===
+ES6でjavascriptを記述するため、babelをインストールする。
+* 以下のコマンドを実行し、babelをインストールする。
+<pre>
+npm install babelify babel-preset-es2015
+npm install babel-plugin-transform-runtime
+</pre>
+:* package.jsonにbrowserifyの設定が必要みたいなことが参考もとに書かれているが、書くとなんかうまく動かないので書かない。
+=== vueifyのインストール ===
+vueの単一ファイルコンポーネントを使えるとコンポーネント物をコンポーネントで管理できるようになる。単一ファイルコンポーネントのコンパイルも取り扱うためにvueifyを導入する。
+* 以下のコマンドでvueifyをインストールする。
+<pre>
+npm install vueify
+</pre>
+* gulpからvueifyを使用できるように、gulpfile.js を下記のように修正する。
+<pre>
+//以下、コマンドの定義
+var gulp       = require('gulp')
+var browserify = require('browserify')
+var source     = require('vinyl-source-stream')
+//タスクの定義。buildという名前でタスクを定義する。
+gulp.task('build', function() {
+  browserify({
+    'entries': ['./main.js'],    // browserifyに渡すソースファイルを配列で定義
+    'transform': ['vueify']    // vueifyでの変換を指定
+  })
+  .bundle() //ファイルを1ファイルにまとめる。
+  .pipe(source('bundle.js')) // まとめた結果にbundle.js という名前を指定する。
+  .pipe(gulp.dest('./')); // ./にまとめた結果を出力する。
+});
+//デフォルトタスクの指定
+gulp.task('default', ['build']);
+</pre>
+* さっきまで使ってたサンプルからテキスト部分を切り離し、text.vueという名前で以下のファイルを作成する。
+<pre>
+<template>
+  <p>{{message}}</p>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            "message":"TEST"
+        }
+    }
+}
+</script>
+</pre>
+* index.htmlはテンプレート部分が不要になったので以下の内容に変更
+<pre>
+<html>
+  <head>
+    <title>TEST</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="text/javascript" src="./bundle.js"></script>
+</html>
+</pre>
+* main.jsを以下のように変更
+<pre>
+const Vue = require('vue');
+const App = require('./text.vue');
+const app = new Vue({
+    render: function(createElement) {
+        return createElement(App);
+    },
+}).$mount('#app')
+</pre>
+* 変更後、gulpでコンパイルしブラウザで表示確認を行う。

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