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 のロゴがマウスカーソルを追う。
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 頃)
しかも、続きものにしてしまった。 (-_-;;
Author And Source
この問題について(SPA 初心者が Quasar framework で D3.js と一緒に vue と vuex を体験する(1)), 我々は、より多くの情報をここで見つけました https://qiita.com/high-u/items/ab7360eb69a3cc4d1100著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .