create-cssui

create-cssui 是 CSS UI 组件库配套的项目脚手架，用于快速初始化带主题预设的 React / Vue 工程。

建议使用 Node.js 18.0.0 及以上版本。脚手架生成的项目会在 package.json 中自动写入 engines.node 约束。

功能概览

• 支持交互选择 React 或 Vue 3
• 支持选择 TypeScript 或 JavaScript
• 支持选择主题预设：周生生金、米杏金、香槟金
• 支持选择布局：水平布局（默认）或 侧边导航布局
• 默认推荐品牌色：#B8B092、#CDA064、#9E8A57
• 生成项目默认使用 logo_Block.svg 作为浏览器图标
• 支持选择是否启用路由
• Vue 项目默认内置 vue-router 和 Pinia
• 支持选择是否启用 ESLint
• 默认配置 CSS UI 依赖预热（optimizeDeps）
• 支持自动安装依赖，也支持仅生成文件不安装依赖
• 生成的项目结构对齐前端分层规范

使用方式

发布后使用

pnpm create cssui
npm create cssui@latest
yarn create cssui

交互式创建

create-cssui

在交互菜单中，支持使用方向键 ↑ / ↓ 切换选项，按回车确认，按 Esc 取消。

指定项目名

create-cssui my-app

如果不传 --framework，脚手架会交互询问是创建 React 还是 Vue 3 项目；如果不传 --language，也会继续询问使用 TypeScript 还是 JavaScript。

使用参数直接创建

create-cssui my-react-app --framework react --language typescript --theme gold --layout sidebar --router --eslint
create-cssui my-vue-app --framework vue --language javascript --theme oat --layout horizontal --eslint

参数说明

| 参数 | 说明 | | ----------------------------------------- | ------------------------------------- | | -f, --framework <react\|vue> | 选择框架 | | -l, --language <typescript\|javascript> | 选择开发语言 | | -t, --theme <gold\|oat\|champagne> | 选择主题预设 | | -a, --layout <horizontal\|sidebar> | 选择布局，默认 horizontal | | -p, --package-manager <pnpm\|npm\|yarn> | 选择包管理器 | | --router / --no-router | 是否启用路由 | | --pinia / --no-pinia | 是否启用 Pinia，仅 Vue 有效，默认开启 | | --eslint / --no-eslint | 是否启用 ESLint | | --typescript / --ts | 快速选择 TypeScript | | --javascript / --js | 快速选择 JavaScript | | --no-install | 仅生成文件，不自动安装依赖 | | -y, --yes | 使用默认值跳过交互 | | -h, --help | 查看帮助 |

默认值

• 框架：react
• 开发语言：typescript
• 包管理器：优先根据当前命令上下文推断，默认 pnpm
• 主题：gold
• 布局：horizontal
• React 路由：开启
• Vue 路由：开启
• Vue Pinia：开启
• ESLint：开启
• CSS UI 依赖预热：开启
• 自动安装依赖：开启

生成结构

脚手架会根据所选配置生成一套分层工程：

• React：src/pages、src/layouts、src/router、src/store、src/api、src/hooks、src/features
• Vue：src/views、src/layouts、src/router、src/store、src/api、src/composables、src/directives、src/features
• 通用：src/components、src/constants、src/types、src/utils、src/styles
• 主题配置：src/config/theme.ts 或 src/config/theme.js

其中主题预设会写入 src/config/theme.ts 或 src/config/theme.js，并通过 ConfigProvider 的 theme 属性注入，避免业务项目直接依赖内部主题包。

布局支持两种默认骨架：

• horizontal：顶部品牌栏 + 二级导航，适合官网/展示型站点
• sidebar：左侧导航 + 右侧内容区，适合中后台/多模块站点

其中 sidebar 布局会优先根据路由配置派生侧边导航，避免路由与菜单配置重复维护。

默认推荐色为：#B8B092、#CDA064、#9E8A57。

依赖预热说明

生成的项目会默认在 vite.config.ts 或 vite.config.js 中配置 optimizeDeps，预热 @cssui/react 或 @cssui/vue，保证开发环境启动体验更稳定。

本地开发

在当前 monorepo 中，可以从仓库根目录运行：

pnpm run create:app

或者直接执行脚本：

node packages/create-cssui/bin/create-cssui.mjs

本地验证示例

node packages/create-cssui/bin/create-cssui.mjs tmp/demo-react --framework react --language javascript --theme gold --layout sidebar --router --eslint --no-install --yes
node packages/create-cssui/bin/create-cssui.mjs tmp/demo-vue --framework vue --language typescript --theme oat --layout horizontal --eslint --no-install --yes

后续计划

后续可以继续扩展更多初始化能力，例如：

• Tailwind CSS
• Vitest
• Prettier
• React 状态管理模板
• 更丰富的页面模板（后台 / 营销页 / 移动端）