# fantasi

**Repository Path**: keep1996/fantasi

## Basic Information

- **Project Name**: fantasi
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-20
- **Last Updated**: 2025-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fantasi

##### 建議執行 `npm run doc` 以網站模式查看文檔

## 基础版本

| 依赖 | 版本                |
| ---- | ------------------- |
| Node | v20.12.1 `lts/iron` |
| NPM  | v10.5.0             |


## 專案文件參考
* [Dialog & PopupMessage 組件](docs/dialog.md)
* [Form 表單相關組件](docs/form.md)
* [Git Commit 與 分支規範](docs/git.md)
* [Http Request 請求模組](docs/http.md)
* [i18n 語言包設定 與 更新](docs/i18n.md)
* [客製化 icon 設定](docs/icon.md)
* [RWD 切版](docs/layout.md)
* [Pack 打包工具](docs/pack.md)
* [Vuetify 樣式配置](docs/vuetify.md)
* [Yup 驗證模組](docs/yup.md)
* [SSL 設定](docs/ssl.md)
* [Vue3 Lottie 動畫設置方式](docs/lottie.md)
* [Zod 驗證 API 資料結構](docs/zod.md)

## 專案初始化

1. 執行 `npm install`
2. 使用 `Visual Studio Code` 開發請在`extension`（延伸模組）的輸入框輸入`@recommended` 安裝所需的開發工具
3. 執行 `npm run dev` 啟動專案
4. 把 `.env.example` 複製一份，更名為 `.env.development`，並且設定環境變數
5. Done
   
## 查看專案文件
1. 執行 `npm run doc` 啟動開發文件預覽服務
2. 開啟瀏覽器輸入 `http://localhost:2266` 查看專案文件
3. 如果要撰寫文件，請參考 [VitePress](https://vitepress.vuejs.org/zh/)

## 環境變數

1. 要使用 `import.meta.env` 語法取得環境變數，該變數的命名需要加入前綴 `VITE_`

```shell
# Applicaiton Name 目前僅用於<title>
VITE_APP_NAME=fantasi
# API Base URL
VITE_BASE_URL=/
```

### 環境變數子檔

1. `.env` 所有環境適用
2. `.env.development` 開發環境適用
3. `.env.production` 正式環境適用，打包時會自動引入
4. 若有特定環境，假設為 `.env.staging` ，則可以使用 `vite build --mode staging` 來打包，打包時會自動引入

## <font color="red">!!!重要提醒!!!</font>

> <font color="red">有加入或移除任何環境變數，請加入到 `.env.example` 內，並且通知其他人更新，避免因變數不足導致的開發錯誤</font>

## Package.json 命令使用

| 命令                      | 說明                                                                                  |
| ------------------------- | ------------------------------------------------------------------------------------- |
| `npm run dev`             | 使用 `Dev Server` 啟動開發環境                                                        |
| `npm run dev:ssl`         | 使用 `Dev Server` 啟動開發環境，並且使用 `SSL` 加密，通常用於需要 https 的第三方服務  |
| `npm run build`           | 產生正式環境用靜態網頁                                                                |
| `npm run build:staging`   | 產生測試環境用靜態網頁                                                                |
| `npm run preview`         | 根據 `npm run build` 產生的網頁來預覽正式環境                                         |
| `npm run preview:staging` | 根據 `npm run build:staging` 產生的網頁來預覽測試環境                                 |
| `npm run format`          | 使用 `Prettier` 自動化排版 `/src` 下的檔案                                            |
| `npm run lint`            | 使用 `ESlint` 檢查專案內檔案是否有不符 `Elsint Vue Standard` 規範的程式碼             |
| `npm run parse`           | 載入 i18n 語言包                                                                      |
| `npm run parse:about`     | 載入條款類 i18n 語言包                                                                |
| `npm run parse:select`    | 載入國家選擇器 i18n 語言包                                                            |
| `npm run pack`            | 部署發版用工具，輸入版本號會自動打包跟製作 zip，可以參考 [部署打包工具](docs/pack.md) |
| `npm run doc`             | 啟動開發文件預覽服務                                                                  |