SPA 初心者が Quasar framework で D3.js と一緒に vue と vuex を体験する（1）

1. Quasar Framework とは

1.1. どんなフレームワークか

• 公式 http://quasar-framework.org/
• モバイルハイブリッドアプリケーションを作るためのフレームワーク
• Quasar = モバイルコンポーネント on Vue.js + デザインフレームワーク + Webpackビルドシステム
• Cordova / Electron に統合できる
• もちろんスマホブラウザ、PCブラウザでも動作する
• レスポンシブ対応できる
• モバイルで使うであろうコンポーネントが充実
• ちょっと書けばかなりリッチなUIが作れる
• ドキュメントが充実している
• バージョンはまだ 0.x.x で、バージョンアップで一部、下位互換が無くなったりしたので注意

会社の同僚の受け売りです。

1.2. こんなコンポーネントが用意されている

http://quasar-framework.org/components/
http://quasar-framework.org/quasar-play/android/index.html#/showcase
http://quasar-framework.org/quasar-play/apple/index.html#/showcase

1.3. q-layout は便利だが、ちょっと注意

q-layout という便利な機能があるのだけど、quasar framework 0.13.x、0.14.x では、配下のコンポーネントが変な挙動をするとの証言が2、3上がった。具体例を示せず申し訳ない。

2. 環境構築

2.1. Chrome の拡張を入れる

もちろん、絶対じゃないけど、vue のコンポーネントの階層がデベロッパーツールで見れるようになる。

Vue.js devtools - Chrome ウェブストア

2.2. VSCode の拡張を入れる

いろいろあるけど、下記を入れた。
Vue.js Extension Pack - Visual Studio Marketplace

他にも Vue VS Code Extension Pack - Visual Studio Marketplace とかが便利らしい。

2.3. アプリ用のディレクトリを作る

ディレクトリ作って、そのディレクトリを VSCode で開いた。

mkdir ~/Projects/vue/quasar-d3-challenge
code $_

VSCode 上のターミナルが開いていなければ、 Shift + Ctrl + @ （Mac）で開く。
メニューからは、 表示 --> 統合ターミナル で開ける。
（ここから先は、 ターミナル と書いた時は、VS Code 上のターミナルを指す。）

ターミナルで、 node -v を叩いて、node が入っているか確認。node.js は nvm 好きなので、それで入れているが、動けばなんでも良い。ググればたくさん出て来るのでそちらを参照。

今回は、 v6.12.2 を使った。

2.4. Quasar Framework のインストール

ターミナルで下記コマンド実行し、グローバルに quasar コマンドをインストール。

npm install -g quasar-cli

Quasar CLI のバージョンをチェック。

quasar version

v0.6.4 だった。

3. アプリ作成

3.1. プロジェクト作成

ターミナルで下記コマンドを実行。

quasar init default .

quasar init <starter_kit_name> <folder_name> というコマンド。
starter_kit_name は、 quasar list で確認できる。今回は default を使用。
folder_name は、フォルダー名を入力すれば、カレントディレクトリにそのフォルダ名でフォルダが作成されその中に各種ファイルが作成される。今回は . を使用。

上記コマンドは、カレントディレクトリ内に、ファイル、ディレクトリがあると怒られるので、空にしておく。
ここで、 .gitignore や README.md 、 package.json なども生成される。

そしたら、下記をサクッと。

npm install

3.2. Quasar でテスト実行

ターミナルで下記コマンドを。

quasar dev

成功すれば、下記のようなメッセージが表示される。

ブラウザでこんな画面が勝手に開く。
ツールバーのデザインがひと昔前感があるけど、リッチな感じ。Quasar のロゴがマウスカーソルを追う。

http://localhost:8080/#/

Ctrl + C で終了。

3.3. Build する

コマンドで、 quasar build --help を打つと何やら出てくる。

quasar build --help

  Usage: quasar-build [theme]

  Options:

    -h, --help  output usage information
  Example:

    # build for production
    $ quasar build

    # build for production with specific theme
    $ quasar build mat
    $ quasar build ios

ただ、今回はシンプルに。

quasar build

build のオプションを何もつけないと
Building Quasar App with "mat" theme...
らしい。
このこまんどでは、 dist ディレクトリが作られて、その配下にビルドされたものが入る。
Build complete with "mat" theme in "/dist" folder.

ビルドしたアプリの確認は、 VSCode のローカルで立ち上がるサーバの拡張を入れると便利。
今回は、 Live Server - Visual Studio Marketplace を利用。

./dist/index.html をタブで開いて、 command + shift + p (Mac) で、コマンド パレットを開き、 live と打つと、 Show Live Server Preview が表示されるので、それを選択する。

めだたく、右側に表示される。

一旦、ここまで。

4. 続く

アドベントカレンダー『Vue.js #1 Advent Calendar 2017 | 19日目』の登録をしておきながら、投稿が非常に遅くなってしまい、申し訳ございません。（投稿日時：2017/12/31 23:50 頃）
しかも、続きものにしてしまった。 (-_-;;