celeris web

芹菜網

英語| 簡體中文

介紹

Celeris Web 是一個免費開源的前端開發框架，採用了最新技術，包括 Vue 3、Vite 和 TypeScript。其 monorepo 方法可輕鬆管理相依性並在多個專案上進行協作，為開發人員提供建置現代 Web 應用程式的全面解決方案。

無論您是經驗豐富的開發人員還是新手，Celeris Web 都能提供利用最新工具和技術的簡化前端開發流程。

立即開始使用 celeris-web，體驗高度簡化的前端開發流程，該流程利用最新技術的力量，包括尖端的自然語言處理功能。

特徵

• ⚡ 快如閃電：使用 Vue 3、Vite 和 pnpm 構建
• ？強型別：使用 TypeScript
• Monorepo 方法：可以輕鬆管理相依性並在多個專案上進行協作？
• 最新語法：使用新的 <script setup> 語法 ?
• ？元件自動導入：自動導入元件？
• ？ API 自動導入：使用 unplugin-auto-import 直接導入 Composition API 等？
• 官方路由器：使用 Vue Router v4 ？
• ？載入回饋：使用NProgress提供頁面載入進度回饋
• ？狀態管理：使用 Pinia 進行狀態管理？
• 中文字體預設：包含中文字體預設??
• ？ I18n 準備好：準備好透過語言環境進行國際化了嗎？
• ☁️ Netlify 準備就緒：Netlify 上的零配置部署 ☁️

編碼風格

• @kirklin/eslint-config

建議的 IDE 設定

• ?️ 網路風暴
• VS程式碼
• 掌側

包依賴關係

 圖解TD
   管理員{管理員}
   管理 --> 管理-api
   管理-->資產
   管理 --> ca 組件
   管理-->元件
   管理-->常量
   管理-->指令
   管理員 --> 鉤子
   管理員 --> 區域設置
   管理員--> 請求
   管理-->樣式
   管理-->類型
   管理--> 實用程式
   資產
   成分
   組件 --> 資產
   組件 --> ca-組件
   組件 --> 常數
   組件 --> 樣式
   組件 --> 類型
   組件 --> 實用程式
   鈣成分
   ca 組件 --> 常數
   ca-組件 --> utils
   指令
   指令 --> 實用程式
   鉤子
   鉤子 --> 類型
   語言環境
   語言環境 --> 常數
   語言環境 --> 類型
   語言環境 --> 實用程式
   要求
   請求-->常數
   請求 --> 區域設置
   請求-->類型
   請求--> 實用程式
   類型
   類型 --> 常數
   實用程式
   實用程式 --> 類型
   管理API
   管理-api --> 常數
   管理-api --> 類型

若要更新上圖，請編輯 README 檔案並開啟包含變更的新 PR。

代碼中的雙語註釋

在Celeris Web的設計中，我們強調程式碼的可讀性和可學習性。為了實現這一目標，每個函數都配備了中英文雙語註釋，確保開發人員無論其母語如何，都可以輕鬆理解和學習程式碼。

為什麼選擇雙語評論？

1. 全球協作：在多元文化團隊中，雙語註釋可以促進更好的溝通和協作，確保團隊成員能夠準確理解程式碼的功能和實現。

2. 方便學習：對於初學者來說，雙語註釋提供了更人性化的學習環境，幫助他們快速掌握程式碼的邏輯和結構。

3. 開發者友善：我們致力於打造一個對開發者友善的環境，雙語評論是我們實現這一目標的關鍵舉措。

例子：

 /**
 * 打开一个新的浏览器窗口
 * Open a new browser window
 *
 * @param {string} url - 要在新窗口中打开的 URL
 * The URL to open in the new window
 *
 * @param {object} options - 打开窗口的选项
 * Options for opening the window
 * @param {string} options.target - 新窗口的名称或特殊选项，默认为 "_blank"
 * @param {string} options.features - 新窗口的特性（大小，位置等），默认为 "noopener=yes,noreferrer=yes"
 */
export function openWindow ( url : string , { target = "_blank" , features = "noopener=yes,noreferrer=yes" } : {
  target ?: "_blank" | "_self" | "_parent" | "_top" ; // 新窗口的名称或特殊选项，默认为 "_blank"
  features ?: string ; // 新窗口的特性（大小，位置等），默认为 "noopener=yes,noreferrer=yes"
} = { } ) {
  window . open ( url , target , features ) ;
}

透過這些雙語註釋，我們旨在為開發人員提供更愉快、更有效率的編碼體驗，使 Celeris Web 成為真正易於上手和深入研究的前端模板。

Monorepo 設計的優點

1.更簡單的依賴管理： Monorepo集中管理所有專案的依賴，避免了不同專案之間的版本衝突，使整體依賴管理更加清晰和簡單。

2.程式碼共享和多用性：不同專案可以輕鬆共享和重複使用程式碼，減少冗餘開發的工作量。這對於保持程式碼一致性、提高開發效率非常有利。

3.統一建置與部署： Monorepo透過統一的建置和部署工作流程簡化了整個開發流程，降低了配置和管理的複雜度，提高了開發團隊內部的協作效率。

4.統一版本控制：所有專案都在同一個版本控制庫中，版本管理變得更一致、更可控。這有助於團隊更好地追蹤和處理與版本相關的問題。 Monorepo 的設計不僅將 Celeris Web 定位為管理系統模板，而且將其定位為快速開發 C 端產品的前端 Web 模板。有了 Celeris Web，前端開發之旅變得更加輕鬆愉快！

設計理念：打破管理員管理限制，專注C端使用者體驗

市場上大多數前端模板主要迎合B端用戶的需求，為企業管理系統（Admin）提供強大的功能和靈活的介面。但很少有模板在設計時考慮到C端產品的特點，而這正是Celeris Web的創新之處。

打破管理員管理的限制：

傳統Admin管理系統優先考慮資料展示和業務管理，而C端產品則強調使用者體驗和視覺吸引力。 Celeris Web認識到C端使用者對介面美觀、互動流暢的需求，不僅提供強大的後端管理功能，還專注於將前端介面提升到更高的使用者滿意度。

專注C端使用者體驗：

Celeris Web 不只是管理系統的範本；它也是一個管理系統的範本。這是一個優先考慮C端產品使用者體驗的前端Web範本。我們的目標是透過引入創新的設計原理，突破傳統管理系統的束縛，確保前端呈現的C端產品能提供出色的使用者體驗。

突出特點：

• 時尚美觀的UI設計：我們優先考慮視覺美感，運用現代的設計語言，讓Celeris Web的UI不僅是功能的匯集，更是一場讓C端使用者著迷的視覺饗宴。
• 人性化的互動體驗：考慮C端使用者的習慣和需求，Celeris Web強調互動設計。透過流暢的動畫效果和直覺的操作，使用者可以體驗到前所未有的愉悅和便利。
• 可自訂主題，實現個人化：認識到C端產品的多樣性，我們提供了豐富的主題客製化選項，讓每個C端專案都擁有獨特的外觀，完美契合個人化需求。

憑藉著這種獨特的設計理念，Celeris Web致力於探索前端開發的新可能性，為C端產品注入更多的活力和創造力。我們相信這樣的創新將獲得用戶的廣泛認可，並有助於提升產品價值。在 Celeris Web 的世界中，前端開發超越了管理系統的限制，融入了更多與使用者體驗相關的令人興奮的元素。

現在就試試吧！

GitHub 模板

從此範本在 GitHub 上建立一個儲存庫。

克隆到本地

npx degit kirklin/celeris-web my-vite-app
cd my-vite-app
pnpm i

用法

發展

只需運行並訪問 http://localhost:8888

pnpm run dev

建造

要建立應用程序，請運行

pnpm run build

您將在dist中看到生成的檔案可供使用。

在 Netlify 上部署

轉到 Netlify 並選擇您的克隆，一路OK ，您的應用程式將在一分鐘內上線。

Docker 生產建置

首先，透過在專案根目錄中開啟終端來建立 celeris-web 映像。

docker buildx build . -t celeris-web:latest

運行映像並使用-p標誌指定連接埠對映。

docker run --rm -it -p 8080:80 celeris-web:latest

明星歷史