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

為什麼我們需要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 的模板

檔案的結構目錄是這樣

直接修改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>

看看結果

若想直接一次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 連結