python-flask-vue-creator
📖 技能介紹
name: python-flask-vue-creator description: "建立 Flask + Vue.js 全棧專案，採用單埠架構、uv 依賴管理、結構化日誌和生產級前端設計。當用戶要求以下操作時觸發：建立新的 Flask+Vue 專案、搭建 Web 應用、構建全棧 Python+Vue 應用、初始化 Flask Web 專案、設定單埠 Flask 前後端專案。觸發詞：新建專案、建立專案、搭建專案、Flask專案、Vue專案。"
Flask + Vue.js 專案建立器
搭建 Flask 3.1 + Vue.js 全棧專案，採用單埠架構、結構化日誌和獨特的前端設計。
架構概述
| 層級 | 技術選型 |
|---|---|
| Web 框架 | Flask 3.1.0 |
| 前端 | Vue.js (CDN, 單埠) |
| 依賴管理 | uv |
| 日誌 | Python logging (TimedRotatingFileHandler) |
| 埠 | 80 (統一) |
單埠架構
所有請求由 Flask 在 80 埠統一處理。靜態檔案（HTML/CSS/JS）通過 Flask 路由從 templates/ 目錄提供。
專案建立工作流
按順序執行以下步驟：
- 收集需求 - 詢問專案名稱和簡要描述
- 初始化專案結構 - 執行
scripts/init_project.py - 配置依賴 - 使用 uv 設定
pyproject.toml - 建立 Flask 入口 - 生成包含日誌的主應用檔案
更多技能請訪問小蔥技能站7w4.net。
- 設計前端 - 遵循前端設計指南（見下文）
- 更新 AGENTS.md - 任何更改後同步專案文件
- 驗證並執行 - 測試專案正常啟動
步驟 1：收集需求
向用戶詢問： - 專案名稱（用於目錄、檔名和應用標題） - 應用功能的簡要描述 - 任何特定的設計偏好（配色方案、風格方向）
步驟 2：初始化專案結構
執行初始化指令碼：
python scripts/init_project.py <project-name> --path <target-directory>
這將建立：
<project-name>/
├── AGENTS.md # AI Agent 專案指南（自動生成）
├── pyproject.toml # uv 專案配置
├── uv.lock # uv 鎖定檔案（自動生成）
├── src/
│ ├── <project-name>.py # Flask 主入口（含日誌）
│ ├── templates/ # 前端資源
│ │ ├── <project-name>.html # 主頁面 (Vue.js)
│ │ ├── css/ # 樣式檔案
│ │ ├── js/ # JavaScript 檔案
│ │ └── assets/ # 靜態資源（圖片、字型等）
│ ├── utils/ # 核心工具模組
│ │ ├── __init__.py
│ │ └── logger.py # 日誌模組
│ └── log/ # 日誌輸出目錄
│ └── *.log # 按模組分日誌檔案（按天輪轉）
步驟 3：配置依賴
pyproject.toml 自動生成，包含 uv 映象配置：
[tool.uv]
index-url = "https://pypi.tuna.tsinghua.edu.cn/simple"
核心依賴：
dependencies = [
"flask>=3.1.0",
]
步驟 4：建立 Flask 入口
生成的 <project-name>.py 包含整合的日誌功能：
from flask import Flask, send_from_directory, send_file
from utils.logger import get_logger
app = Flask(__name__)
logger = get_logger('<project-name>')
@app.route('/')
def index():
return send_file('templates/<project-name>.html')
# ... 靜態檔案路由 ...
if __name__ == '__main__':
logger.info('啟動伺服器，埠 80...')
app.run(host='0.0.0.0', port=80, debug=True)
步驟 5：設計前端
建立 HTML/CSS/JS 時應用前端設計指南。完整設計系統參見 references/frontend-design.md。
核心原則：
- 反 AI 風格：避免 Inter、Roboto、Arial、紫色漸變、emoji 圖示
- 獨特字型：使用獨特的 Google Fonts 組合（參見 references/frontend-design.md "字型" 部分）
- 有意配色：選擇特定場景的配色方案，而非通用漸變
- 僅用 SVG 圖示：使用 Heroicons、Lucide 或 Simple Icons — 不用 emoji
- Vue.js CDN 引入：在 HTML 中使用 Vue 3 CDN，Composition API 配合
<script setup>模式
Vue.js 整合模式：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<!-- Vue 模板 -->
</div>
<script>
const { createApp, ref, computed, onMounted } = Vue
const app = createApp({
setup() {
// Composition API
return {}
}
})
app.mount('#app')
</script>
詳細的 Vue.js 最佳實踐參見 references/vue-guidelines.md。
步驟 6：更新 AGENTS.md
重要：任何專案修改後，更新 AGENTS.md 以反映變更。
AGENTS.md 檔案在專案建立時自動生成，作為 AI Agent 專案指南。必須與實際專案狀態保持同步。
何時更新 AGENTS.md： - 新增新路由或 API 端點 - 新增新工具模組或檔案 - 更改專案結構 - 新增新依賴 - 修改日誌配置 - 任何架構變更
更新內容： - 專案結構樹（新增/刪除檔案和目錄） - 架構描述（新路由、模組、功能） - 開發指南（新約定或模式） - 更新日誌表（新增日期、版本、描述條目）
更新日誌格式：
## 更新日誌
| 日期 | 版本 | 變更內容 |
|------|------|---------|
| 2026-06-07 | 0.1.0 | 初始專案建立 |
| 2026-06-08 | 0.2.0 | 新增使用者認證模組 |
步驟 7：驗證並執行
cd <project-path>
uv sync
uv run python src/<project-name>.py
日誌模組
概述
- 位置：
src/utils/logger.py - 日誌目錄：
src/log/ - 格式：
%(asctime)s | %(levelname)-8s | %(name)s | %(message)s - 輪轉：按天 (TimedRotatingFileHandler)，保留 30 天
- 輸出：同時輸出到控制台和檔案
使用方法
from utils.logger import get_logger
logger = get_logger('module_name')
logger.info('操作成功完成')
logger.warning('發生了意外情況')
logger.error('發生錯誤: %s', error_detail)
日誌檔案
每個日誌記錄器名稱建立單獨的日誌檔案：src/log/<logger_name>.log
檔案在午夜輪轉，命名模式：<logger_name>.log.YYYY-MM-DD
交付前檢查清單
交付前驗證：
- [ ] 專案結構符合指定佈局
- [ ]
pyproject.toml包含[tool.uv]清華映象配置 - [ ]
pyproject.toml位於專案根目錄（與 src 同級） - [ ] Flask 路由服務所有靜態檔案目錄
- [ ] 日誌模組已整合到 Flask 入口
- [ ]
src/log/目錄存在且包含.gitkeep - [ ]
AGENTS.md存在且反映當前專案狀態 - [ ] HTML 使用 Vue 3 CDN 和 Composition API
- [ ] 無 emoji 圖示（僅用 SVG）
- [ ] 字型獨特（非 Inter/Roboto/Arial）
- [ ] 配色方案符合場景
- [ ] 所有互動元素有
cursor-pointer - [ ] 文本對比度達到 4.5:1 最低要求
- [ ] 在 375px、768px、1024px、1440px 響應式適配
🤖 AI 評測
這個 Skill 質量不錯，能幫助開發者快速搭建 Flask + Vue 專案。它把單埠架構、日誌系統、前端設計等細節都考慮到了，初始化指令碼也很實用。不足之處是說明文件有些分散，示例展示不夠直觀，對新手可能不夠友好。總體適合有一定經驗的開發者使用。
