既存のVue.jsアプリにQuasar Frameworkを入れる

Vue.jsを使ってリッチなアプリを作るのにスタイル組むのは面倒なのでいい感じに作れるものないかなと思ったら、Quasar Frameworkを教えてもらいました！

Quasar Frameworkとは？

なんか、レスポンシブなウェブサイトとかPWAとかネイティブアプリ風のものが作れたりElectronアプリを作れるみたいです。

awesome-vueにはUI的な部分に並んでます。

Getting Started

Componentsのページを眺めて、めっちゃこれいいじゃん！と思ったので使ってみようと思いました。
Getting Startedのページを見るとFirst Stepsには…。

# installing Quasar CLI
$ npm install -g quasar-cli

どうやら、Quasar CLIなるものを入れるらしいです。
でも自分は既存のものにQuasar Frameworkを入れたいんだ！となったので入れませんでした。

※ Quasar CLI入れないと動かないとかそういうのあるかもしれないですが、一旦知りません。詳しい人書いて！

既存のVue.jsアプリに入れる

$ vue init webpack myapp

のようにinitしたプロジェクトを参考に書いてきます！

Quasar Frameworkのインストール

$ yarn add quasar-framework
$ yarn add quasar-extras # icons使わないなら入れなくてもOK!

インストールしたら、src/main.js に色々追加。この辺はquasar-cliのテンプレートを見るとわかります。
quasarframework/quasar-template-default

src/main.js

import Quasar, * as All from 'quasar-framework'

// ios風のデザインなら quasar.ios.css
// マテリアルデザイン風なら quasar.mat.cssを読み込む
import 'quasar-framework/dist/quasar.ios.css'
//import 'quasar-framework/dist/quasar.mat.css'

// iconもいろいろ選べる
import 'quasar-extras/material-icons'
// import 'quasar-extras/ionicons'
// import 'quasar-extras/fontawesome'

// アニメーションのときに使うみたいです。
import 'quasar-extras/animate'

// すべてのコンポーネントを使いたいのでこうしてます
Vue.use(Quasar, {
  components: All,
  directives: All
})

使ってみる

あとは何も悩むことはありません。Componentsのページから使いたいコンポーネントを選ぶのです！

今回はボタンを使ってみます。

<template lang="html">
  <div>
    <q-btn icon="create" color="secondary">さくせす！</q-btn>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="css">
</style>

さくせす！