# my-cli-monorepo1 **Repository Path**: 23745038/my-cli-monorepo1 ## Basic Information - **Project Name**: my-cli-monorepo1 - **Description**: Vue3 + TypeScript + ElementPlus + ag-grid 项目生成器 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-01-06 - **Last Updated**: 2026-01-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Vue3 + TypeScript + ElementPlus + ag-grid 项目生成器 一个现代化的企业级前端项目脚手架，用于快速生成基于 Vue3 + TypeScript + ElementPlus + ag-grid 的完整应用。 ## 🚀 项目简介 本项目是一个使用 Lerna 管理的 Monorepo 架构，包含两个核心包： - **CLI 工具**：用于快速生成 Vue3 + TypeScript + ElementPlus + ag-grid 项目 - **文档站点**：提供详细的使用指南和 API 文档 ## 🛠️ 技术栈 ### 核心技术 - **Vue 3**：现代化前端框架，采用 Composition API - **TypeScript**：静态类型检查，提升开发体验和代码质量 - **Element Plus**：基于 Vue 3 的企业级 UI 组件库 - **ag-grid**：高性能的企业级数据表格组件 - **Vue Router**：官方路由管理库 - **Pinia**：新一代状态管理库，替代 Vuex - **Vite**：现代前端构建工具，提供极速开发体验 ### 项目管理 - **Lerna**：Monorepo 管理工具，用于管理多个包 - **pnpm**：高效的包管理工具，支持 workspace 功能 ## 📁 项目架构 ``` my-cli-monorepo1/ ├── packages/ │ ├── cli/ # CLI 工具包 │ │ ├── bin/ # CLI 入口文件 │ │ ├── dist/ # 编译后的产物 │ │ ├── src/ # 源代码 │ │ ├── templates/ # 项目模板 │ │ ├── package.json # CLI 包配置 │ │ └── tsconfig.json # TypeScript 配置 │ └── docs/ # 文档站点 │ ├── docs/ # 文档内容 │ ├── .vitepress/ # VitePress 配置 │ └── package.json # 文档包配置 ├── .gitignore # Git 忽略配置 ├── lerna.json # Lerna 配置 ├── package.json # 根包配置 └── pnpm-lock.yaml # pnpm 锁文件 ``` ## 📦 包结构说明 ### CLI 工具 (`packages/cli/`) CLI 工具是项目的核心，用于快速生成 Vue3 + TypeScript + ElementPlus + ag-grid 项目。它提供了友好的交互式界面和默认配置选项，让新手也能轻松创建完整的企业级前端项目。 **主要功能**： - ✅ **交互式项目创建**：通过问答式界面引导用户配置项目 - ✅ **默认配置快速生成**：无需手动配置，一键生成标准项目结构 - ✅ **自定义项目选项**：支持选择是否使用 Vue Router 和 Pinia - ✅ **完整的项目模板**：包含 Element Plus 和 ag-grid 的完整配置 - ✅ **自动安装依赖提示**：创建项目后提供清晰的后续操作指引 **核心文件**： - `src/index.ts`：CLI 入口文件，处理命令行参数和用户交互 - `src/createProject.ts`：项目生成核心逻辑，负责模板渲染和文件生成 - `src/types.ts`：TypeScript 类型定义 - `templates/`：项目模板目录，包含完整的 Vue3 + TypeScript + ElementPlus + ag-grid 项目结构 - `bin/cli.js`：CLI 可执行文件，通过 `vue3-gen` 命令调用 **CLI 依赖**： - `commander`：命令行参数解析 - `inquirer`：交互式命令行界面 - `handlebars`：模板渲染引擎 - `chalk`：命令行颜色输出 - `ora`：命令行加载动画 ### 文档站点 (`packages/docs/`) 文档站点使用 VitePress 构建，提供详细的使用指南和 API 文档。 **主要内容**： - 快速开始指南 - CLI 命令参考 - 项目结构说明 - 功能模块文档 - 最佳实践 **核心文件**： - `docs/index.md`：文档首页 - `docs/guide/`：使用指南 - `docs/cli/`：CLI 命令文档 - `docs/project/`：项目结构文档 - `docs/features/`：功能模块文档 ## 🚀 快速开始 ### 1. 准备工作 确保你的系统已安装以下软件： - **Node.js**：v16.0.0 或更高版本 - **pnpm**：v7.0.0 或更高版本（推荐使用） ### 2. 安装和构建 CLI 工具 ```bash # 克隆或下载项目到本地 # cd 到项目根目录 # 安装所有依赖 pnpm install # 进入 CLI 包目录 cd packages/cli # 构建 CLI 工具（将 TypeScript 编译为 JavaScript） pnpm build ``` ### 3. 使用 CLI 创建项目 #### 方式一：交互式创建（推荐新手使用） ```bash # 在 CLI 包目录下执行 node dist/index.js create my-project ``` 执行后，会进入交互式配置界面，按照提示完成以下配置： - 项目描述（可选） - 作者信息（可选） - 是否使用 Vue Router（推荐：是） - 是否使用 Pinia（推荐：是） #### 方式二：默认配置快速创建 ```bash # 使用默认配置快速生成项目 node dist/index.js create my-project --default ``` 默认配置包括： - 使用 Vue Router - 使用 Pinia - 标准项目描述和作者信息 ### 4. 项目创建完成后的操作 项目创建成功后，CLI 会自动显示后续操作指引： ```bash # 进入项目目录 cd my-project # 安装项目依赖 pnpm install # 启动开发服务器 pnpm dev ``` 开发服务器启动后，打开浏览器访问 `http://localhost:5173/` 即可看到项目。 ### 5. 启动文档站点（可选） 如果你想查看完整的文档，可以启动文档站点： ```bash # 返回项目根目录 cd .. # 进入文档包 cd packages/docs # 启动开发服务器 pnpm dev ``` 文档站点将在 `http://localhost:5173/` 启动。 ## 📖 使用指南 ### CLI 命令详解 #### 创建项目命令 ```bash node dist/index.js create [options] ``` **参数说明**： - ``：必填，新创建的项目名称 - `[options]`：可选参数 - `--default` 或 `-d`：使用默认配置快速创建项目，跳过交互式问答 **示例**： ```bash # 创建名为 "my-vue3-project" 的项目（交互式） node dist/index.js create my-vue3-project # 使用默认配置创建名为 "quick-start" 的项目 node dist/index.js create quick-start --default ``` #### 查看帮助 ```bash node dist/index.js --help ``` 显示所有可用命令和选项的详细说明。 #### 查看版本 ```bash node dist/index.js --version ``` 显示 CLI 工具的当前版本号。 ### 项目模板特点 生成的项目是一个完整的企业级前端应用，包含以下特性： #### 核心技术栈 - ✅ **Vue 3 Composition API**：现代化的组件开发方式 - ✅ **TypeScript**：完整的类型支持，提升开发体验 - ✅ **Vite**：极速的开发服务器和优化的构建过程 #### UI 和数据组件 - ✅ **Element Plus**：企业级 UI 组件库，包含 100+ 常用组件 - ✅ **ag-grid**：高性能的数据表格组件，支持大数据量和复杂交互 #### 状态和路由管理 - ✅ **Vue Router**：官方路由管理，支持动态路由和嵌套路由 - ✅ **Pinia**：新一代状态管理，替代 Vuex，提供更简洁的 API #### 项目结构 - ✅ **标准化目录结构**：清晰的代码组织方式 - ✅ **组件化设计**：可复用的组件结构 - ✅ **样式管理**：统一的样式规范 - ✅ **类型定义**：完整的 TypeScript 类型声明 ### 常见问题和注意事项 1. **项目名称已存在怎么办？** - CLI 会自动检查目标目录是否存在，如果存在会提示错误 - 解决方法：使用不同的项目名称，或者先删除已存在的目录 2. **依赖安装失败怎么办？** - 确保网络连接正常 - 尝试使用 `npm install` 替代 `pnpm install` - 清除 npm/pnpm 缓存后重试 3. **开发服务器无法启动？** - 检查端口是否被占用 - 确保所有依赖已正确安装 - 查看终端输出的错误信息并根据提示解决 4. **如何自定义项目配置？** - 创建项目后，可以修改 `vite.config.ts` 配置构建选项 - 修改 `src/main.ts` 配置全局组件和插件 - 修改 `package.json` 更新项目信息和依赖 ### 项目目录结构 创建的项目包含以下主要目录和文件： ``` my-project/ ├── src/ │ ├── components/ # 组件目录 │ ├── router/ # 路由配置 │ ├── views/ # 页面组件 │ ├── styles/ # 样式文件 │ ├── types/ # TypeScript 类型定义 │ ├── App.vue # 根组件 │ └── main.ts # 入口文件 ├── index.html # HTML 模板 ├── vite.config.ts # Vite 配置 ├── tsconfig.json # TypeScript 配置 └── package.json # 项目配置和依赖 ``` ## 🔧 开发流程 ### 1. 开发 CLI 工具 ```bash # 进入 CLI 包 cd packages/cli # 开发模式（监听文件变化） pnpm dev # 构建项目 pnpm build ``` ### 2. 开发文档站点 **方式一：传统方式（进入文档包执行）** ```bash # 进入文档包 cd packages/docs # 启动开发服务器 pnpm dev # 构建文档 pnpm build ``` **方式二：便捷方式（在 CLI 包目录执行）** 你可以在 CLI 包目录下直接使用以下命令，无需切换到 docs 子项目： ```bash # 启动文档开发服务器 pnpm docs:dev # 构建文档 pnpm docs:build # 预览构建后的文档 pnpm docs:serve ``` **使用示例**： ```bash # 在项目根目录下 cd packages/cli # 启动文档开发服务器 pnpm docs:dev ``` 执行后，文档站点将在 `http://localhost:5173/` 启动。 ## 🤝 贡献指南 1. Fork 仓库 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 开启 Pull Request ## 📄 许可证 本项目采用 ISC 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 ## 📞 联系方式 如有问题或建议，欢迎提交 Issue 或 Pull Request。 --- **Built with ❤️ using Vue 3, TypeScript, Element Plus and ag-grid**