Help us understand the problem. What is going on with this article?

Vue.jsで手軽じゃないアプリケーション構築

More than 3 years have passed since last update.

概要

Vue.jsは、MVVMというMVCの派生種を設計基盤として構築されたクライアントサイドJSフレームワークです。AngularJSと表面上は似ていますが、設計思想は全く異なるもので、作成したUIコンポーネントを組合せてページを構成することを前提にしています。

「Vue.jsで遊んでみた」のような記事はよく見るのですが、実際にプロジェクトとして走らせる場合に、アプリケーション構成からテストまで、どのようにするのがベストなのかを、まとめました。

SPAをベースに、サーバーサイド言語上で動かすときの構成も調べています。

ブラウザサポート

  • yyx990803/vue - Vue.jsはレガシー・ブラウザをサポートしていません。

参考記事

大きめのアプリケーション構成について

ガイドライン

より大きなアプリケーション構成をつくるためのガイドラインが、Building Larger Apps - vue.jsとしてドキュメントに記してあり、内容を以下に簡潔にまとめます。基本的には、このガイドラインに従ってアプリケーションを作成してゆくのがよいと考えています。

モジュール化

AngularJsのようにもとからモジュール化の仕組みはないので、BrowserifyWebpackをつかいます。

1ファイルコンポーネント

Vueify等をつかい、コンポーネントは1ファイルにします。

ここがAngularJsとは性質を全く別にするところで、Vue.jsは、基本的にコンポーネントを組み合わせてスクリプトをつくってゆきます。

ルーティング

マニュアルでもできますが、Page.jsDirectorなどのライブラリを使ったほうがより簡単に実装できます。

サーバーとの通信

Vue instanceが自動的にjson型にシリアライズされた$dataオブジェクトをもっています。場合によってはSuperagentなどを使ってもよいでしょう。

ユニットテスト

CommonJS pre-processorを用いてKarmaを使うのを推奨。

実例

ハッカーニュースのクローンをSPAで。Browserify + Vueifyをコードのモジュール化に使い、Director.jsをルーティングに、Firebase APIをバックエンドに使ったもの。

Railsにて動かす際の決め事

asset/javascriptには書かず別ファイルをつくり、全JSファイルをバンドルしたコードを読み込む。

良質な資料

※はてぶ数と記事の質は相関なし。

疑問点

よく調べきれていない点、ご教授願いたい点です。

  • 仮にRailsプロジェクトの場合、管理はgemでやるのがよいのか?フロントエンドのコードだけでも、bower、もしくはnpmでやるのがよいか?
  • GruntやGulpは入れたほうがよいのか?
  • Karmaを実装するまでの具体的な手順は?
  • Vueifyは、component内のDOMを、どのようにコンパイルするのか?

追記

疑問の答えをこちらにまとめました=>Vue.js on Railsパーフェクトガイド

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away