iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
2
自我挑戰組

GAME30天系列 第 6

Quasar Framework intro. (3/3

前端開發組件化時代, 我們要學會快速使用組件

為什麼我們需要componets?

不論是什麼樣的程式,模組化在開發上都是很重要的一個概念,前端工程也不例外,我們都會希望能夠將 Web 開發過程中的 JS, CSS, HTML 封裝起來,以便後續重複使用,而過程中就會出現一些缺點:

  1. js, css, html 三者的資源在最一般的網頁開發上基本上是分開管理,你如果想用別人的 library,可能還需要先載入對方需要的 JQuery,include 該套件需要的 css,最後才能在你的 HTML 內加入。

  2. Scope 問題:因為別人設定的 CSS class name 衝突而導致 Style 變動的情況。

  3. 相容性:各個 Framework 間的 components 基本上無法共用

關於前兩點,透過 Webpack 與 CSS Modules 都可以找到相對應的解法,而第三點相信透過許多 hack 也是可以解決。

參考資料 TechBridge 技術共筆部落格

Quasar componets

這次範例使用 Quasar cli 中 PWA 的模板

檔案的結構目錄是這樣
https://ithelp.ithome.com.tw/upload/images/20171216/20107379O0eguv1BZw.png

直接修改Hello.vue, 使用一個button componet

<template>
  <div class="hello">
    <q-btn color="red">Do something</q-btn>
  </div>
</template>

<script>

import { QBtn } from 'quasar'

export default {
  name: 'hello',
  components: {
    QBtn
  }
}
</script>

看看結果
https://ithelp.ithome.com.tw/upload/images/20171217/20107379cZksheIdEH.png

若想直接一次import全部的componets可以在main.js裡這麼做, 但是非常不建議這樣做, 因為會使你的檔案肥大, 充滿用不到的廢code

import Quasar, * as All from 'quasar'

Vue.use(Quasar, {
  components: All
})

Quasar Directives

Quasar 內建幾個自定義的 Vue Directives 直接對dom底層做操作, 用法很簡單和componets差不多

<template>
  <div class="hello">
    <q-btn color="red">Do something</q-btn>
    <div v-ripple>Do something</div>
  </div>
</template>

<script>

import {
  QBtn,
  Ripple
 } from 'quasar'

export default {
  name: 'hello',
  components: {
    QBtn
  },
  directives: {
    Ripple
  }
}
</script>

此時點擊div就會出現ripple特效, 為什麼是 v- 開頭的前綴, 而不是 q- 呢? 這是因為 Vue Directives 有規定只接受 v-開頭的 propoety, Quasar 的基本使用就介紹到這, 其實用法都很簡單, 而且大部份文件都寫得很清楚, 之後如果有遇到比較特別需要注意的 , 會再特別寫出來

附上 Quasar Doc 連結


上一篇
Quasar Framework intro. (2/3
下一篇
Firebase intro. (1/4
系列文
GAME30天30

尚未有邦友留言

立即登入留言