這邊我想來介紹一下最近使用vue的過程。
從禮拜一開始我第一次建立這個模板框架，到完全把後端數據搭上去準備完成任務，大概花了五天的時間。
先是了解檔案結構的樣子，像是App.vue內部架構
包含了以下三個元素:
- template
- 用來畫UI，排版按鈕或網頁工具卡片等。
- 寫法像HTML
- script
- 用來寫程式控制專用，語法上是js
- style
- 就是CSS
- 定義剛剛的那些UI，顏色或字型或線條粗細要長怎樣
- 特效效果也可以加在這邊
App.vue 是所有元件的父模板進入口，相當於專案頂端的Root。
然後內部還有一個main.js入口，寫好引入口就可以了。
基本的一頁式網頁應用，這樣就夠了。
如果要寫比較複雜或是市面常見的網站結構，多半會搭一些components元件，像是MVVM架構來分門別類。
- src/components/xxx.vue
- 這邊可以放像flutter一樣的客製化widget，只不過這邊是改成vue寫法，但用途差不多，都是以重複使用的UI項為主。
- src/views/xxx.vue
- 這邊就是放你想要案進去打開的頁面。
- src/router/index.js
- 這邊可以路由行為，也就是你從App.vue，然後點進去決定一開始要怎麼跑的方式。
- 指定點哪邊開什麼東西
- src/api
- 這邊我放的是我在後端寫的API叫用的方式
- 整理在這邊比較不會混亂
如果端看上面一開始覺得挺複雜的，可以先從一頁式的方式寫個簡單的應用，看看互動方式。
不過因為我們之前使用FLUTTER習慣了，很快就需求起手式是需要有側邊欄按鈕，要有LOGO顯示要有多個API叫用，資料流要怎麼鋪在頁上做取用。
所以馬上就從我們熟悉的分門別類開始做起。
幸好也不困難網路上很多資源，框架套的很舒服好用。
簡簡單單就能找到適合的框架，然後套上去賞心悅目。
以後大概不會再用FLUTTER弄WEB網頁，vue簡單輕便又方便掛載上去結合nginx 集成一大包。
docker compose 一上就全搞定了。
這個年初又學到了新東西，真棒!
