# UI選用評估與專案架構說明

## Prerequisites

- Node.js v14
- Yarn 2+

## Implementation

- Nuxt3 based on Vite & Vue3
- [Pinia](https://pinia.vuejs.org/ssr/nuxt.html)
- Tailwindcss
- Husky、Lint-Staged
- Linter and Auto fix (Stylelint、Eslint)

## Recommended IDE Setup

VS Code with the following extensions:

- johnsoncodehk.volar
- dbaeumer.vscode-eslint
- stylelint.vscode-stylelint
- bradlc.vscode-tailwindcss

## UI 元件庫選用評估

### Quasar

優點：

- 客製化程度高
- 功能與元件齊全

缺點：

- 不支援SSR，且目前與 Nuxt3 整合程度不高

→ 沒有 nuxt3 的 module

→ auto import 會跑出無法解析元件名稱錯誤（然而畫面上卻能正常呈現，怕有後患）

→ 最致命的缺點 想要繞過SSR噴錯需要包一層 `<client-only>` 在最外面，不符合新聞網站的SEO需求

- Sass 寫法過於老舊 → Terminal 會報警告且 Nuxt3 無法針對 loader 調整

### Varlet

[https://varlet-varletjs.vercel.app/#/zh-CN/index](https://varlet-varletjs.vercel.app/#/zh-CN/index)

優點：

- 支援SSR
- 中文資源
- 元件功能齊全（無限滾動、圓形進度條、Icon checkbox… 上次討論的應該都有）
- Nuxt3 整合成度高
- 支援按需引入
- 選用的技術最潮最前衛
- 獲得尤雨溪、阮一峰和Antfu大佬們推薦讚賞

缺點：

- Nuxt上的按需載入需要手動引入稍微麻煩了點

    // plugins/varlet.js
    import { defineNuxtPlugin } from '#app'
    import {
      Icon,
      Button,
      Loading
    } from '@varlet/ui'
    import '@varlet/ui/es/button/style/index.js'
    import '@varlet/ui/es/loading/style/index.js'
    import '@varlet/ui/es/icon/style/index.js'
    
    export default defineNuxtPlugin((nuxtApp) => {
      nuxtApp.vueApp.use(Icon)
      nuxtApp.vueApp.use(Button)
      nuxtApp.vueApp.use(Loading)
    })