內容目錄

使用vue3打造trello式的工作看板

今年參加了{Laravel x Vue}Conf Taiwan，第一天工作坊主題是使用Vue3打造類似trello的工作看板，藉此重新檢視自己在使用Vue3的習慣與詢問一些自學想不透的問題。
很感謝Kuro的推廣與分享，幫忙打廣告一下，有興趣學Vue的人請務必購買「重新認識 Vue.js：008天絕對看不完的 Vue.js 3 指南」XDDDDD
先附上本次工作坊的repo與demo。

專案目標

本次專案是打造一個類似trello的工作記錄看板，工作坊的學習目標為以下：

認識 vite 與 Vue.js 開發環境設定
熟悉 Vue.js 3.x Compontions 與 Setup script
使用 Tailwind CSS 結合 Vue.js 開發網頁介面
使用 Pinia 管理跨元件狀態
使用 Vue Router 實作前端路由功能 (edited)

使用技術如下：

Vite 3.1.8
Vue.js 3.2
Vue Router 4.1.5
Pinia 2.0
Vue Use
Tailwindcss 3.2.14
Vue.draggable.next
unplugin-vue-components

這邊就不做製作步驟，主要紀錄自己學到的重點，有問題的人可以留言給我。

工作坊筆記

script setup 寫法

Vue3提供了setup的寫法，通常有兩種一種是傳統的export default

export default  {
  setup() {
  //內容
  }
  }

另一種為script setup 寫法

<script setup>
//內容
</script>

這邊建議是盡可能採用script setup 寫法，官方也較推薦這種撰寫方式，雖然要習慣一下，但好處是可以簡化程式碼，實際寫過真的感覺很清爽！

Vue Use

這是一個滿實用的Vue工作組，在這個專案中導入是為了 focus 與 onClickOutside這兩支api，可以協助我們快速處理元素的聚焦與脫離，像是在trello中，點擊某個卡片會跳出燈箱(lightbox)以及點擊燈箱後方的遮罩可以關閉燈箱這種流程。

v-bind傳遞物件到子元件

之前我會使用prop傳遞資料到子元件像是這樣

<TaskItem
          :id="element.id"
          :title="element.title"
          :tasks="element.tasks"
        />

但其實物件可以用v-bind來傳遞寫法如下：

 <TaskItem
          v-bind="element"
        />

而在子元件中需要這樣接值

<script setup>
import { ref, computed } from "vue";
const props = defineProps({
  id: String,
  title: String,
  content: String,
}); 
</script>

如果會對資料修改，那記得要再宣告一個變數來接避免污染父元件的物件喔

const title = ref(props.title);
//修改title

Pinia

類似Vuex的狀態管理套件，超好用啊，我其實沒用過Vuex，只有用過原生的依賴注入，Pinia的使用真的方便很多。
這邊就不寫使用方法了，請參考官方資料

取用函式與值

要注要透過Pinia取用函式與值的作法
如果closeEditTask是函式，那可以用解構方式來引用，但這樣的話就無法觀察到物件中的狀態或值

以下兩種相同
const { closeEditTask } = store;  //物件解構
const { closeEditTask } = store.closeEditTask;  
解構無法被觀察

如果是狀態或值，則需要computed

const currentEditTask = computed(() => store.currentEditTask); //currentEditTask這是狀態
因為要關注狀態所以用computed

在script中取的DOM

想取得DOM內容的話可以用ref，像這樣

const target = ref();

然後網頁元入記得宣告

<textarea
      ref="target"    
    ></textarea>

這樣就可以透過target來操作textarea的內容

偵測自己的click

有點像以前寫jQuery的監聽，對某元素監聽時要加上this不然會監聽到所有同元素，vue的@click也是

<div
    @click.self="closeEditTask"
  >

src中的compoment與views命名習慣

這不是強制，習慣上只會在某地方特定使用一次的可以放在views中，例如首頁，如果是重複使用的元件則用compoment

Vue.draggable.next

支援拖曳效果的套件，附上官方說明

unplugin-vue-components

超棒的玩意，可以直接以命名呼叫compoment，以往我們要呼叫compoment通常要先引入

import {xxx} from  "xxx"

但這個套件可以直接省略import，以原名就能直接呼叫，太棒啦！