# create-wcs

**Repository Path**: nodets/create-wcs

## Basic Information

- **Project Name**: create-wcs
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-24
- **Last Updated**: 2025-09-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# create-wcs

快速创建基于 Web Components 的模块化项目脚手架工具，遵循 HTML Template、Custom Elements、Shadow DOM 和 ES Modules 四大核心技术规范。

## 特性

- 🚀 一键生成完整的 Web Components 开发环境
- 🔧 模块化设计：将组件逻辑、模板和样式分离为独立文件
- 📦 内置构建工具配置（Rollup + TypeScript）
- 🔄 开发环境支持热重载
- 📝 遵循 Web Components 标准规范
- 🎨 样式隔离（Shadow DOM 特性）
- 📱 响应式设计支持

## 快速开始

使用 npm init 直接创建项目：
npm init wcs my-web-components
cd my-web-components
npm start
或者使用 npx：
npx create-wcs my-web-components
cd my-web-components
npm start
## 使用方法

### 创建项目
# 创建默认名称的项目
npm init wcs

# 创建指定名称的项目
npm init wcs <project-name>
运行上述命令后，工具会引导你完成项目创建过程，包括设置版本号和选择是否立即安装依赖。

### 开发模式
npm start
启动开发服务器，默认地址为 `http://localhost:8080`，支持热重载，修改代码后会自动刷新页面。

### 构建生产版本
npm run build
将项目打包为生产就绪的代码，输出到 `dist` 目录。

### 运行测试
npm test
执行测试用例（项目模板中包含基础的测试配置）。

### 代码检查
npm run lint
使用 ESLint 检查代码规范。

## 项目结构

创建的项目结构如下：
my-web-components/
├── src/
│   ├── components/
│   │   └── my-element/        # 示例组件
│   │       ├── my-element.ts  # 组件逻辑（Custom Element 定义）
│   │       ├── my-element.html # 组件模板（HTML Template）
│   │       └── my-element.css  # 组件样式（Shadow DOM 样式）
│   ├── index.ts               # 入口文件，导出组件
│   └── main.ts                # 主程序，注册组件并初始化
├── public/
│   └── index.html             # 示例页面
├── rollup.config.js           # Rollup 配置
├── tsconfig.json              # TypeScript 配置
├── package.json               # 项目依赖和脚本
└── README.md                  # 项目说明
## 组件模块化设计

项目采用模块化设计理念，将 Web Components 拆分为三个独立文件：

1. **逻辑文件**（`.ts`）：定义自定义元素类，处理生命周期、属性和事件
2. **模板文件**（`.html`）：组件的 HTML 结构，使用 `<template>` 标签
3. **样式文件**（`.css`）：组件的样式表，仅作用于组件内部（Shadow DOM）

这种设计使代码更易于维护和扩展，适合大型项目和组件库开发。

## 示例组件

创建的项目中包含一个 `my-element` 示例组件，展示了 Web Components 的核心特性：

- 自定义属性（`name`、`count`、`disabled`）
- 事件派发（`count-changed`）
- 插槽使用（`<slot name="content">`）
- 生命周期方法
- 响应式更新

## 许可证

[MIT](LICENSE)