MUKI space*
Front-end Development,
Effective Note-Taking.
Vue 自製 breadcrumb 導航麵包屑元件
Vue 自製 breadcrumb 導航麵包屑元件主要使用嵌套路由來自動顯示階層。首先在 router/index.js 設定路由，使用 redirect 將無資料頁面導向 userList。User/Index.vue 中放置 breadcrumb 元件和 router-view。
製作 breadcrumb 元件時，利用 router 的 matched 屬性顯示設定的 meta。透過 watch 和 onMounted 監聽路由變化，動態更新 breadcrumbList。最後使用 CSS after 語法調整樣式，實現簡單的導航效果。...
Vue3 如何載入 Router 以及 Vuex
VUE3 因為 Composition API 的緣故，使用 router 以及 vuex 的方式有所不同。載入 router 時，需使用 useRouter 和 useRoute 方法，並可透過 router.push 導航和 route.params 讀取參數。
載入 VUEX 時，需使用 useStore 方法，並可透過 store.state 讀取狀態。更多詳細介紹可參考官網。...
Vue CLI 搭配 Vue3 + Tailwind CSS3 開發
使用 Vue CLI 安裝 Tailwind CSS3，需手動安裝 v3 版本。首先，執行 `npm install tailwindcss --save-dev`，接著安裝相依套件 `npm install -D tailwindcss postcss autoprefixer`。新增 `tailwind.config.js` 設定檔，並修改 `postcss.config.js`，設定 tailwindcss 與 autoprefixer。
若 autoprefixer 版本問題已解決，無需降版。完成配置後，測試 Tailwind CSS v3 語法，如 `
用 Vue + TailwindCSS 時，變數 class 沒有作用
使用 Vue 和 TailwindCSS 時，發現變數 class 無效，原因是渲染順序問題，TailwindCSS 誤以為未使用這些 class 而刪除。運行 npm run dev 後，class 未生效。
解決方法是將相關 class 加入 safelist。打開 tailwind.config.js，輸入 safelist 配置。若使用 TailwindCSS 2.0，需參考相應文件。這樣可以解決變數 class 無效的問題。...
將 Nuxt.js 串接的資料改寫成多國語系
上次介紹了如何用 Nuxt.js 串接資料做下拉式選單，這次將資料改寫為多國語系。首先安裝 @nuxtjs/i18n，並在 nuxt.config.js 中設定 locales 和 defaultLocale。也可以在 nuxt.config.js 設定語系的資料夾和檔案。
準備好語系檔後，打開 navBar.vue，刪除 fethData，加入 i18n 設定，並在 computed 中將 i18n 語系檔寫回 navData。這樣就能自動對接多國語系 json 檔案，並用 nuxt-link 切換語系。這是目前使用 Nuxt.js 串接多國語系的方法。...
用 Vue + Express 建置前後端網站
最近計畫重置履歷介紹，並考慮使用 Vue 和 Express 建置前後端網站，以解決跨域 API 問題。首先，使用 Webpack 安裝 Vue-cli，並安裝 Axios 進行 API 請求。網站結構中，Express 被放在 Vue 專案底下。
接著，安裝 Express 及其產生器，設定 Router，並使用 nodemon 自動重啟伺服器。為解決跨域問題，安裝 cors 套件，並設定前端 proxy。最後，使用 connect-history-api-fallback 套件，將 Vue build 出來的專案在 Express 下執行。開發環境設定完成後，即可開始進行網站開發。...
在 Vue 使用所有的 Font Awesome icon
在 Vue 中使用 Font Awesome，可以參考官方的 Github 文件。在 main.js 匯入 Font Awesome，並在 Vue 中註冊 FontAwesomeIcon 元件。使用 icon 時需個別匯入，若需多個 icon，操作較繁瑣。
若想一次匯入所有 Font Awesome icon，可匯入 fas 來包含所有 solid icon，這樣就不需個別匯入。更多種類如 fas、far、fal、fab，分別代表 Solid、Regular、Light 和 Brands。...