Vue.js + Quasarで爆速プロトタイピング（１）〜Hello World編〜

# 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

```html:main.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から呼び出すことができます。

```js:app.js
// 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を構築できます！

次回 -> [Vue.js + Quasarで爆速プロトタイピング（２）〜Toolbar編〜](https://qiita.com/tsumasakky/items/a47d2a8c77551d378fba)