Vue+Quasarを一週間触ってみて

実務で使うために学んだこと

Quasarとは

VueベースのFramework
便利な備え付けコンポーネントがいっぱい
StyleやLayoutも簡単にできる
レスポンシブデザインも簡単に実装できる
簡単なbuild process(quasar CLIを使えば脳死でビルドできる)
SPA/PWA/SSR/Mobile App/Desktop appなどを高速で始められる
MobileはCordova
DesktopはElectron
いわゆるマルチプラットフォームなアプリケーションをVueと備え付けのコンポーネントで爆速で作れるフレームワークというわけです。(しかも全て同じコードで)
お隣さんはIonic FrameworkやFramework7など

キャッチアップするためにしたこと

ドキュメントを読み込む
https://quasar.dev/start/pick-quasar-flavour

動画でアプリを作りながら手を動かす
Todoアプリ
https://www.youtube.com/watch?v=GV-D85D9KJQ&t=2118s
写真共有アプリ？
https://www.youtube.com/watch?v=Ud8jS3VlVHw

Grid Gutter の使い方

https://quasar.dev/layout/grid/gutter
基本的に　.row クラスにつける　.q-col-gutter-md 等　コンポーネントに均等にpaddingで余白をつけれる

index.vue

<div class="row q-col-gutter-md"></div>

name属性をつけて　Vue Devtoolで見たときにどのファイルかわかる様にする

scriptタグの中に書く

MyLayout.vue

<script>
name:"MyLayout" //Vue DevtoolでMyLayoutと表示される
export default {
//
}
</script>

$qというものがQuasarで用意されていて {{ $q }} で色々なプロパティが参照できる

index.vue

<template>
  <q-page>
    {{ $q }}
  </q-page>
</template>

Vueファイルでのレスポンシブでのクラスの付け替え

index.vue

<template>
  <div class="row" :class="{'q-mb-md' : $q.screen.lt.sm }" >
</template>
// コードの読み下し
// スクリーン幅がスモール( 1023px ) 以下がtrueであれば、クラス'q-mb-md'を追加する

computedプロパティを使用したスタイルの追加

index.vue

<template>
  <span :style="testStyle">test</span>
</template>

<script>
export default {
computed: {
  testStyle() {
      return this.$q.screen.xs ? { color: 'red' } : { color: 'blue' };
    }
  };
}
</script>
// コードの読み下し
// スクリーン幅がxs( 599px )以下の場合 color: redを違う場合はcolor:blueを適用する

よくするミス①

<span :style="testStyle">test</span>
// :styleの :を忘れてスタイルが効かない :style= 正　style= 偽

よくするミス②

computed: { 
  testStyle() {  
    return this.$q.screen.xs ? {color: 'red'} : { color: 'blue' } ; 
  }
};
// の{ color: '' }このシングルクォートが無くて　スタイルが効かない　 {color: 'red'} 正　{color: red} 偽
// 数字の場合は良い　line-height 1.5とか　文字列は''が必要
// {line-height: 1.5} 正　{color: red } 偽
    }