FrontendTemplateVite

TODO

README.md

• 如何貢獻程式碼
• 如何做程式碼審核
• 如何做 QA 測試 ...

架構

在同一個專案下把 Client、Dashboard 切分不同資料夾出來。

框架

• Vite
• Vue3

工具 Tool

測試 Test

靜態檢查 Static Check 在還沒跑程式之前，讓你知道你的程式碼有問題。

• 語法風格 Prettier & ESLint
• 語法檢查 ESlint

動態測試 Dynamic Test 程式跑起來看有沒有正常運作。

• Unit Test (Jest)
• E2E (Cypress)

流程控制 Workflow

建立測試到正式環境之前的自動流程，減少人為檢查、發布造成的錯誤可能。

• 採用 GitHub Actions
  • Test 測試流程 (希望可以支援 Netlify Preview Mode)
  • Staging 展示流程
  • Production 產品流程

發布環境 Publish

前端要發布至哪個平台。

• 採用 Netlify

預裝套件

通用 General

• lodash
• axios
• day.js - 日期計算
• big.js - 數字精準運算（包含小數點）
• nprogress - 能做出 Nuxt 一樣的 Loading 效果
• Cookie 操作：需要找一下
• async-validator - 資料校驗：需要想一個一致的使用方式
• Numeral.js - 格式化數字

Vue & Vite

• unplugin-vue-components - 自動 import 元件
• vite-plugin-pages - 依據資料夾自動引入 Router，可以做到像 Nuxt 自動生成路徑。
• vite-plugin-vue-layouts - 方便的設定 Layout
• rollup-plugin-visualizer - 圖像化分析 bundle 檔案的大小
• vite-plugin-windicss - 設計給 Vite 用，近似 tailwind.css 的套件
• vite-plugin-i18n：需要找一下

介面 UI*

• Windi CSS - 用於前台樣式
• https://2x.antdv.com/docs/vue/introduce/ - 用於後台樣式
• @ant-design/icons-vue - 用於後台樣式 Ant Design Icon 載入
• antd-dayjs-vite-plugin - 用於後台樣式把 Ant Design 的 moment.js 換成 day.js

常用設定

• Alias @ to src/client/src
• Alias ~ to src/dashboard/src

常用功能

• 公用程式 Utils
  • delay
  • getCookie
  • createQueryString
  • handleTableChangeWrapper
• 後台 Dashboard
  • 登入 Login Page
  • 忘記密碼 Forgot Password Page
  • 歡迎介面 Welcome Page
• 文件 Document
  • storybook
  • JSDoc

協作

• 約定式提交
• husky
• cz
• GitHub PR Template