# 前端组件化 Phase 1 – 脚手架搭建

## 交付内容

1. **构建工具接入**  
   - 根目录新增 `package.json` + `package-lock.json`，安装 `Vite + Vue 3 + Pinia + TypeScript + ESLint + Prettier`。
   - `vite.config.ts` 输出到 `static/dist/`，并通过 `Bundler` module resolution 支持 `.vue`/ESM。
   - 配套 `tsconfig.json`、`tsconfig.node.json`、`.eslintrc.cjs`、`.prettierrc`、`.prettierignore` 约束代码质量。

2. **基础源码结构**  
   - `static/src/` 下建立 `main.ts`、`App.vue`、`stores/ui.ts`、`styles/base.css`、`env.d.ts`，演示 Pinia 注册与 SFC 文件布局。
   - 目前 `App.vue` 仅渲染“实验模式”占位内容，后续阶段会逐步替换 legacy UI。

3. **入口加载策略**  
   - `static/index.html` 新增模块化 Loader：若 `localStorage.useNewFrontend === '1'` 或 `window.__USE_NEW_FRONTEND__ === true`，则加载 `/static/dist/assets/main.js`；否则回退到旧版 `/static/app.js`。
   - 通过 `npm run build` 生成的 bundle 文件固定位于 `static/dist/assets/`（无 hash），便于 Flask 模板引用。

4. **忽略项**  
   - `.gitignore` 添加 `node_modules/` 和 `static/dist/`，避免构建产物/依赖入库。

## 使用方式

```bash
npm install          # 首次安装依赖
npm run dev          # 监听式构建（watch）
npm run build        # 生成 production bundle 到 static/dist
npm run lint         # ESLint
npm run format       # Prettier
```

启用实验前端：打开浏览器控制台执行 `localStorage.setItem('useNewFrontend', '1')`（或在全局脚本设置 `window.__USE_NEW_FRONTEND__ = true;`），刷新页面即可加载新的 Vite 入口；如需回退，执行 `localStorage.removeItem('useNewFrontend')` 或将变量设为 false。

更多组件拆分计划请阅读 `doc/frontend/component_plan.md`。
