1.概要
Vue.js + Quasar Frameworkでプロトタイプ作成を行うことがあったので、メモがてら記録しておきます。
Quasarとは（Google翻訳）
Quasarは、MIT 開発者がライセンスしたオープンソースフレームワーク（Vueで動作）で、Web開発者がレスポンシブ++ Webサイト/アプリを多くのフレーバーで作成するのに役立ちます。
Quasarにより、開発者はコードを一度書くだけで、同じコードベースを使用してWebサイト（SPA、PWA、SSR + SPAクライアントテイクオーバー、SSR + PWAクライアントテイクオーバー）、モバイルアプリ、および/または電子アプリとして同時に展開できます。最先端のCLIを使用し、よく書かれた非常に高速なQuasar Webコンポーネントに裏打ちされた、記録的な速さでアプリを設計します。
公式のドキュメントが充実しまくっています！
Quasarは日本語資料が少ないものの、公式リファレンス読めばなんとかなります。
Vue.js
https://jp.vuejs.org/index.html
Quasar Framework (v0.17系)
https://v0-17.quasar-framework.org/components/
2.開発環境
Visual Studio Code
のみ！
コード整形のためにフォーマッターはあると便利です。
今回使用するファイルはHTML, CSS, JavaScriptの3種類です。
デフォルトのフォーマッターでも大丈夫ですが、僕は「Prettier」というフォーマッターを使っています。
Quarsarは0系を使用しています。
Vue.js v2.5.17
Quasar v0.17.20
3.コーディング
3-1.フォルダ構成
まずは次のフォルダ構成をせこせことつくります。
/vue-sample
├ css/
│ └ style.css
├ pages/
│ └ main.html
└ app.js
3-2.main.html
ページとなるHTMLを作成します。
Quasarのライブラリや依存ライブラリはCDN経由で読み込んでいますので、インターネット環境が必要です。
https://v0-17.quasar-framework.org/guide/embedding-quasar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="shortcut icon" type="image/x-icon" href="../../favicon.ico" />
<title>Vue.js + Quasarで爆速プロトタイピング</title>
<!-- Material Icons -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<!-- animations -->
<link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet" />
<!-- Finally, add Quasar's CSS -->
<link
href="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.20/dist/umd/quasar.mat.min.css"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
<div id="app">
<q-layout id="main">
<q-page-container>
<div class="page">
<q-input stack-label="greet" v-model="greet"></q-input>
</div>
</q-page-container>
</q-layout>
</div>
<!-- IE support -->
<script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.20/dist/umd/quasar.ie.polyfills.umd.min.js"></script>
<!-- Add Quasar's JS -->
<script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.20/dist/umd/quasar.mat.umd.min.js"></script>
<!-- If you want to add a Quasar Language pack (other than "en-us"). -->
<script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.20/dist/umd/i18n.ja.umd.min.js"></script>
<script src="../app.js"></script>
</body>
</html>
3-3.app.js
mainページにバインドするViewModelを作っていきます。
data, methodsに画面で使用するプロパティやメソッドを記述することで、HTMLから呼び出すことができます。
// Quasar
Vue.use(Quasar);
var app = new Vue({
el: "#app",
data: function() {
return {
greet: "Hello World!"
}
}
});
app.$mount("#app");
4.完成！
main.htmlをブラウザで開くと、「Hello World!」が画面に表示されましたでしょうか？
<q-input></q-input>を使っているので、Quasarのテキストフィールドで表示されていると思います。
このように簡単におしゃれで高機能なUIを構築できます！