CFP Create 使用指南

概述

CFP Create 是一个扩展 create-vite 功能的命令行工具，用于快速创建各种前端项目模板。它支持多种主流框架和模板，包括 React、Vue、Svelte、Solid、Qwik、Preact、Lit 等，并提供 JavaScript 和 TypeScript 两种版本。此外，它还集成了多种代理命令，可直接调用其他官方或第三方的项目创建工具。

安装

npm install -g cfp-create

使用方式

基本命令

cfp-create [项目目录] [选项]

示例

1. 创建 React + TypeScript 项目

cfp-create my-react-app --template react-ts

2. 创建 Vue 项目

cfp-create my-vue-app --template vue

选项

| 选项 | 简写 | 说明 | |------|------|------| | --template | -t | 指定项目模板 | | --help | -h | 显示帮助信息 | | --version | -v | 显示版本信息 | | --overwrite | -o | 覆盖已存在的目录 |

交互模式

如果不带参数直接运行命令，工具会进入交互模式：

cfp-create

交互模式会引导您：

1. 选择项目目录
2. 处理已存在的目录
3. 配置包名
4. 选择框架和模板

支持的模板

基础框架模板

| 模板 | 说明 | |------|------| | vanilla | 纯 JavaScript 项目 | | vanilla-ts | 纯 TypeScript 项目 | | vue | Vue + JavaScript | | vue-ts | Vue + TypeScript | | react | React + JavaScript | | react-ts | React + TypeScript | | preact | Preact + JavaScript | | preact-ts | Preact + TypeScript | | svelte | Svelte + JavaScript | | svelte-ts | Svelte + TypeScript | | solid | Solid + JavaScript | | solid-ts | Solid + TypeScript | | qwik | Qwik + JavaScript | | qwik-ts | Qwik + TypeScript |

Typst 文档模板

| 模板 | 说明 | |------|------| | typst-doc | 单个 Typst 文档文件 | | typst-cfpdoc | 正式的 CFP 文档项目 | | typst-slide | Typst 幻灯片项目 | | typst-book | Typst 书籍项目 |

代理命令模板

| 模板 | 说明 | 对应的命令 | |------|------|------| | custom-create-vue | 官方 Vue 脚手架 | npm create vue@latest | | custom-nuxt | Nuxt 框架 | npm exec nuxi init | | custom-react-router | React Router v7 | npm create react-router@latest | | umi-react | Umi 4.4.6 | pnpm dlx create-umi@latest | | next-react | Next.js 应用 | pnpm dlx create-next-app@latest | | custom-create-preact | 官方 Preact 脚手架 | npm create preact@latest | | custom-svelte-kit | SvelteKit | npm exec sv create | | custom-qwik-city | QwikCity | npm create qwik@latest | | custom-angular | Angular | npm exec @angular/cli@latest | | custom-analog | Analog | npm create analog@latest | | create-html5-boilerplate | HTML5 样板项目 | pnpm dlx create-html5-boilerplate | | create-electron-vite | Electron | npm create electron-vite@latest | | create-umi | Umi 4.4.6 | pnpm dlx create-umi@latest |

其它特殊模版

| 模板 | 说明 | |------|------| | code-compete-2025 | 代码竞赛 2025 模板 | | code-compete-2025-vue3 | 代码竞赛 2025 (Vue3 版本) |

项目结构

生成的项目将包含以下基本结构：

my-project/
├── src/
├── public/
├── vite.config.js
├── package.json
├── README.md
└── .gitignore

对于 Typst 项目，结构会有所不同，主要包含 .typ 文件和相关资源。

注意事项

1. 如果目标目录已存在，需要使用 --overwrite 参数强制覆盖
2. 项目创建完成后不会自动安装依赖，而是提供安装和运行命令供您选择执行
3. 支持多种包管理器：npm、yarn、pnpm、bun
4. 对于 React 项目，您可以选择使用 SWC 作为编译器，以提高开发体验
5. Typst 项目需要单独安装 Typst 工具来编译和预览

多包管理器支持

CFP Create 支持多种包管理器，并会自动适配不同包管理器的命令格式： | 包管理器 | 安装命令 | 运行命令 | |----------|------|------| | npm | npm install | npm run dev | | yarn | yarn | yarn dev | | pnpm | pnpm install | pnpm run dev | | bun | bun install | bun run dev |

Typst 项目使用

对于 Typst 项目，创建完成后可以使用以下命令：

1. 安装 Typst 工具：

npm install -g typst

2. 编译 Typst 文件：

typst compile main.typ

3. 启动监视模式，实时预览：

typst watch main.typ

4. 直接使用 VS Code 的 Tinymist 插件打开 main.typ 进行编辑和预览

获取帮助

cfp-create --help

版本信息

cfp-create --version

License

CFP Create 基于 MIT 协议开源，您可以在遵守协议的前提下自由使用、修改和分发。

反馈与支持

如有任何问题，You know where to find me :-)。