框架脚手架搭建，推送github一键使用

参考vue的官方脚手架vuejs/create-vue: ️ The recommended way to start a Vite-powered Vue project脚手架仓库搭建总流程第一步初始化脚手架工程CLI 外壳新建工程根目录在本地新建一个空目录初始化 Node.js 项目并启用 ES Module在该目录下打开终端运行 pnpm init 生成基础 package.json打开 package.json手动添加 type: module以便直接使用现代 ES6 import 语法安装交互与美化依赖运行pnpm add clack/prompts picocolorsclack/prompts负责在终端弹出单选、输入、确认等交互菜单与加载动画picocolors负责在终端输出彩色高亮文字第二步构建纯净框架底座Base Template规划并创建底座目录按“构建工具链 / 前端技术栈”的层级创建目录例如templates/electron-vite/react/生成基础代码临时使用官方脚手架如 pnpm create quick-start/electron在对应目录下生成初始工程。底座清理清理多余文件清除依赖缓存清理完成后删除该目录下的 node_modules只保留源代码文件确保模板库体积小、便于分发与版本控制第三步按需制作插件/组件增强层Plugins 增量补丁创建插件目录在框架同级目录下创建 plugins/功能名/例如templates/electron-vite/plugins/tailwind/templates/electron-vite/plugins/shadcn/按“最小增量原则”编写 package.json在插件目录下手动新建一个仅有几行的 package.json里面只声明该插件专属的依赖例如 Tailwind 插件只声明 tailwindcss 和 tailwindcss/vite无需重复书写底座原有的 React、Electron 等依赖放置补丁与配置文件路径与底座 1:1 对齐新增文件如果该插件需要新增文件如 components.json、src/renderer/src/lib/utils.ts按最终在项目里的相对路径存放覆盖文件如果该插件需要修改已有配置如注入了插件的 electron.vite.config.ts、或者定义了设计变量的 globals.css直接在此目录下存放配置完毕的完整文件以便后续直接覆盖第四步编写核心调度引擎index.js引入两大通用核心引擎函数renderTemplate(src, dest)负责遍历文件夹并将文件复制到目标项目遇到普通文件直接覆盖遇到 package.json 则转交给 deepMerge。同时阻止拷贝任何 lockfile 到新项目中deepMerge(target, source)负责在不覆盖旧依赖的前提下钻入大括号内部将插件的新依赖无缝融合进目标项目的 package.json设计交互流程使用 clack/prompts依次收集用户输入项目名称、前端框架、CSS 方案、UI 组件库、是否自动安装依赖。按需拼装调用像拼积木一样首先调用 renderTemplate(底座目录, 目标目录)生成基础骨架更新目标项目的 package.json 名称为用户输入的项目名如果用户勾选了某个功能如 Tailwind调用 renderTemplate(tailwind插件目录, 目标目录) 覆盖配置并合并依赖如果用户勾选了组件库如 shadcn调用 renderTemplate(shadcn插件目录, 目标目录) 继续叠加自动安装与交付提示若用户确认自动安装通过 execSync(pnpm install, ...) 在目标目录下自动拉取依赖终端打印进入项目与启动命令cd 项目名pnpm dev流程完毕目录分工使用基座 增量补丁的设计模式框架底座如 templates/electron-vite/react/定位一个最纯粹、能够独立运行的最小闭环项目。内容包含 Electron 的主进程、预加载脚本、最干净的空壳 App.tsx、基础 TypeScript 配置、以及脚本白名单。原则保持绝对干净不要提前引入任何特定业务库没有 UI 库、没有复杂状态管理插件增强层如 templates/electron-vite/plugins/定位当用户在终端勾选某个选项时像打补丁一样覆盖叠加到项目里内容只写引入该插件时“必须发生变化”的内容不要多余文件plugins/ 目录package.json 只写真正新增的依赖增量合并插件目录下的 package.json 不需要重复写 react、electron 等底座已有的包只写它自己专属的依赖。比如 plugins/tailwind/package.json 只有 4 行{ devDependencies: { tailwindcss/vite: ^4.1.18, tailwindcss: ^4.1.18 } }index.js文件中renderTemplate 函数会自动用 deepMerge 函数把这几行合并进底座的 package.json 里底座原有的依赖完全不受影响路径与底座项目保持 1:1 严格对齐插件目录里的文件相对路径要和底座项目最终放的位置分毫不差如果工具函数要在项目的 src/renderer/src/lib/utils.ts 插件里就建plugins/shadcn/src/renderer/src/lib/utils.ts。如果配置文件要在根目录 插件里就直接放在插件根目录plugins/shadcn/components.json。 拷贝引擎会像“盖印章”一样自动把它们分毫不差地投递到目标项目的对应层级。需要修改的配置文件放最终完整版直接覆盖比如底座原本的 electron.vite.config.ts 没带 Tailwind 插件在 plugins/tailwind/electron.vite.config.ts 里就放已经注入好 Tailwind 插件的完整版本。叠加时它会自动把底座原本的未配置版本替换掉添加新插件如果想给脚手架增加 Zustand 状态管理选项新建目录 templates/electron-vite/plugins/zustand/手动里面放一个极简 package.json{ dependencies: { zustand: ^5.0.0 } }可以放一个示例文件 src/renderer/src/store/useCounter.ts在 index.js 交互问答里加一个选项if (config.stateManagement zustand) { renderTemplate(path.join(PLUGINS_DIR, zustand), targetDir) }测试node 项目路径\index.js发布发布到 npm敲一行命令就能直接弹出终端菜单纯 GitHub 仓库管理直接用 npx 远程运行 GitHub 仓库npx github:你的用户名/你的仓库名问题包管理器执第一次执行后会在本地生成一个固定哈希的缓存下次输入同一条命令时包管理器无法从命令本身感知远端是否有新提交为了追求“秒开”的执行速度它直接复用了本地已存在的代码所以远端模板更新了本地可能还是旧的要么使用 Git Tag 标签每次执行时带上标签要么每次都删除npx、pnpx等的本地缓存其他关于create-vue和本文的区别我大致参考了create-vue但仓库目录组织还是不同的create-vue的官方仓库的 template/ 目录下主要有以下几个文件夹create-vue/template/ │ ├── base/ # 最简通用底座所有项目必选包含 index.html, vite.config 等 ├── bare/ # 极简模式给 --bare 参数用的纯净空壳 │ ├── config/ # 重点这就是我们所谓的“plugins特性配置层” │ ├── pinia/ # 只放 Pinia 的依赖与基础配置 │ ├── router/ # 只放 Vue Router 的依赖与配置 │ ├── typescript/ # 只放 TypeScript 的依赖与配置 │ ├── jsx/ # JSX 相关的配置 │ └── vitest/ # 单元测试 Vitest 的配置 │ ├── entry/ # 入口文件的不同变体main.js / main.ts │ ├── default/ # 最普通的 main.js │ ├── router/ # 引入了 router 的 main.js │ ├── pinia/ # 引入了 pinia 的 main.js │ └── pinia-and-router/ # 既选了 pinia 又选了 router 时的 main.js │ ├── code/ # 示例组件App.vue的不同变体 │ ├── default/ # 普通 HelloWorld │ └── router/ # 带有 RouterView 和导航栏的 App.vue │ ├── formatting/ # 代码格式化层prettier / oxfmt │ ├── linting/ # 代码检查层eslint / oxlint │ └── tsconfig/ # tsconfig.json 的不同环境配置create-vue拆得更细它的选项组合极多TS/JS × Pinia × Router所以它把 entry/入口和 config/依赖配置分开了本文放在单独的包比如tailwindcss的配置放在tailwind下更加内聚关于依赖的版本管理脚手架一般是静态模板模板在本地写死了一套模板 package.json然后打包上传到 npm 或 github里面的依赖都是固定版本的我也使用具体的版本但为了方便直接使用github的action让它能够自动更新版本