34 lines
1.8 KiB
Markdown
34 lines
1.8 KiB
Markdown
# 前端组件化 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`。
|