# web-component-study **Repository Path**: PhoenixWing321/web-component-study ## Basic Information - **Project Name**: web-component-study - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-03-24 - **Last Updated**: 2025-03-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # WC 学习项目下面是一个使用 **Vite** 和 **TypeScript** 开发 Web Component 的简单示例。我们将创建一个自定义元素 ``，并在页面中使用它。 --- ### 1. 创建项目首先，使用 Vite 创建一个新项目： ```bash pnpm create vite@latest my-web-component -- --template vanilla-ts cd my-web-component pnpm install ``` 这会创建一个基于 TypeScript 的 Vite 项目。 --- ### 2. 创建 Web Component 在 `src` 目录下创建一个新的文件 `MyComponent.ts`，用于定义我们的 Web Component。具体见 src/MyComponent.ts --- ### 3. 在 HTML 中使用 Web Component 打开 `index.html`，在 `` 中添加我们的自定义元素 ``。具体见 `index.html` --- ### 4. 修改 `main.ts` 在 `src/main.ts` 中，我们只需要确保导入了 `MyComponent.ts`，这样 TypeScript 会编译它。 ```typescript // src/main.ts import './MyComponent'; ``` --- ### 5. 运行项目启动开发服务器： ```bash pnpm dev ``` 打开浏览器，访问 `http://localhost:5173`，你会看到一个带有蓝色文本和边框的 Web Component。 --- ### 6. 添加属性支持我们可以扩展 Web Component，使其支持属性。例如，添加一个 `name` 属性来动态显示内容。修改 `MyComponent.ts`，添加name 然后在 `index.html` 中使用 `name` 属性： ```html ``` 刷新页面，你会看到内容变为 `Hello, Vite!`。 --- ### 7. 打包项目当你完成开发后，可以使用 Vite 打包项目： ```bash pnpm run build ``` 打包后的文件会生成在 `dist` 目录中。 --- ### 总结通过 Vite 和 TypeScript，我们可以快速开发和构建 Web Component。这种方式不需要任何框架，完全基于原生 Web 标准，适合构建轻量级、高性能的组件。你可以根据需要进一步扩展功能，例如添加事件、插槽等。 ## 提示词 1. Vite + Web Component TypeScript + pnpm 开发，不用VUE等框架。写个简单的示例 2. shadow wrapper 改为成员变量 3. MyComponent改得漂亮一点 4. MyComponent色彩好看点，有颜色 ## 问题与优化 - 过程中没有弹出提示信息，通过log定位，Cursor大致发现问题，并通过css解决了。 1. 快速定位和修复了问题 2. 实现了优雅的动画效果 3. 提供了良好的代码提示和补全 4. 让开发过程更加高效