Bowerを利用してVue.jsを使えるところまでのインストール手順 #Vue.js

Vue.jsに入門するため、とりあえず動かすことができる環境を作りました。
ローカルでhtmlファイルを作成して、公式サイトの「10秒で分かる例」を動作させることを目標にします。
ついでにJavaScriptのエコシステムを体験したいので、Bowerからインストールしていきます。

※ Node.jsのインストールは省略します。

Bowerのインストール

$ npm install bower -g

バージョン確認

$ bower -v

※パッケージからNodeをインストールしてnpm insallの実行時にパーミッションエラーが発生する場合などは、適宜 sudo をつけて実行します。

BowerでVue.js入門用のプロジェクトを作成

プロジェクト用に適当なディレクトリを作成して、そこへ移動

$ mkdir hello_vue
$ cd hello_vue

Bowerの初期化コマンドを打って、bower.json(設定ファイル)を作成

$ bower init

このあとたくさん質問が出てきましたが、今回はname, descriptionだけ指定して、他はEnterもしくはYesにしました。

作成されたbower.json

{
  "name": "hello_vue",
  "version": "0.0.0",
  "authors": [
    "xxx <xxx@example.com>"
  ],
  "description": "My first Vue.js application.",
  "main": "index.html",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

BowerでVue.jsをインストール

$ bower install vue --save

Vue.jsのパッケージは、 bower_components というディレクトリの中にインストールされており、vueディレクトリの中にはなにやらたくさんファイルができています。

$ ls -1 bower_components/vue
LICENSE
bower.json
build
circle.yml
dist
perf
src

bowerはgithubから取ってくるだけなのでこうなっているようですが、今回の例であれば実際は dist の中にある、

vue.js
vue.min.js

しか必要ありません。

HTMLファイルを作成して、Vue.jsのサンプルコードを動かす

サンプルコードは公式サイトの「10秒で分かる例」そのままです。

HTMLファイルのひな形(index.html)を作成

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Hello Vue</title>
</head>
<body>

</body>
</html>

Vue.jsを読み込む

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Hello Vue</title>
  <script type="text/javascript" src="bower_components/vue/dist/vue.min.js"></script>
</head>
<body>

</body>
</html>

bodyタグの中にサンプルコードを挿入

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Hello Vue</title>
  <script type="text/javascript" src="bower_components/vue/dist/vue.min.js"></script>
</head>
  <body>
    <div id="demo">
      <p>{{message}}</p>
      <input v-model="message">
    </div>
    <script>
    var demo = new Vue({
      el: '#demo',
      data: {
          message: 'Hello Vue.js!'
      }
    })
    </script>
  </body>
</html>

ここで script部分をheadタグの中に入れてしまうと、DOM読み込み前なのでうまく動きませんでした。

最後にWebブラウザでindex.htmlを開いて、動作確認できれば終了です!

番外: gitで上記のようなBowerプロジェクトを管理するとき

パッケージインストール時の--saveオプションによって記載される、 bower.jsonの"dependencies"(依存関係)に書かれているパッケージは、bower installコマンド(パッケージ名を指定しない)で勝手にインストールされます。
そのため、ファイルサイズなどを考慮するとbower_componentsディレクトリ自体をgitの管理対象外にしておいたほうが良いようです。

bower_componentsディレクトリを無視する

.gitignoreを作成ディレクトリ名を一行書くだけです。

bower_components/

.gitignoreをstageしてcommit

$ git add .gitignore
$ git commit