f:id:cocoro27:20170308195311p:plain

Vue2.xでは仮想DOMが使われるようになりました。それに伴い、「Vue用のテンプレート」を「仮想DOMをレンダリングするための関数」に変換するという処理をコンパイル時に行ってくれる仕組みが組み込まれています。

そして、お手軽にVueを試したい人、プロダクトにVueを使いたい人、コンポーネント志向でアトミックに実装したい人など、様々な用途に応じたテンプレートの書き方(&コンパイルの方法)を用意してくれています。

そのためテンプレートの書き方とコンパイルの種類については仕様がやや複雑で、公式ドキュメントだけでは理解が難しくけっこうハマりどころだと感じている(事実ずっぽりハマりました)ので、知見を残しておこうと思います。

※この記事を書いている時点でのVueのバージョンは2.2.1です。



おさらい Vue.jsの利用方法3パターン

まずVueの利用方法の確認から。

  1. <script>埋め込み
  2. vue-cli
  3. npmモジュール(webpack, browserify, rollup等の利用)

の3つがありますという単純なお話なので、知ってる場合は読み飛ばしてください。


1. <script>埋め込み

<script src="https://unpkg.com/vue"></script>

これでグローバルにVueが用意されます。よくあるHTMLにscript直読込させる方法です。プロダクト開発には向かないですが、軽くVueを試すのには十分ですね。


2. vue-cli

Vueを使ったSPAをつくる環境を用意してくれるcliです。ビルド用のスクリプトやエントリーポイントになるHTMLなどが一括で生成されます。Reactで言うcreate-react-appのようなもの…というとかえって分かりにくい?

以下のコマンドを叩きます。

$ npm install -g vue-cli               # まずはcliのグローバルインストール
$ vue init webpack <project_name>      # webpackを利用したプロジェクトを生成する
$ cd <project_name>                    # プロジェクトのディレクトリに移動して…
$ npm install                          # 依存関係のあるファイルを落としてきて…
$ npm run dev                          # ビルド

公式に「Node.js ベースのツールについて精通していない場合、初心者が vue-cli で始めることは推奨しません」と明記された手法です。たしかにビルド周りの前提知識なしに使うのは難しそうですし、前提知識ある人の多くは自前でビルド環境用意しそうなもので、非推奨であり不人気な気がします