# mykai-html

**Repository Path**: mykai98/mykai-html

## Basic Information

- **Project Name**: mykai-html
- **Description**: mykai-cli: html-server
一个现代化的HTML项目开发脚手架，支持实时热重载和自动刷新。PNPM/TailwindCSS
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-19
- **Last Updated**: 2026-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mykai cli html 脚手架

一个现代化的HTML项目开发脚手架，支持实时热重载和自动刷新。

## 🚀 快速开始

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

这将启动一个本地开发服务器，默认在 `http://localhost:3000` 打开项目。

### 其他命令

```bash
# 启动服务器（不自动打开浏览器）
pnpm start
```

## 📁 项目结构

```
mykai-cli-html-scaffold/
├── css/                 # 样式文件
│   ├── reset.css       # CSS重置样式
│   └── style.css       # 主要样式文件
├── js/                 # JavaScript文件
│   └── main.js         # 主要JavaScript文件
├── img/                # 图片资源
├── index.html          # 主页面
├── package.json        # 项目配置
└── README.md          # 项目说明
```

## ✨ 特性

- 🔥 **实时热重载** - 修改文件后自动刷新浏览器
- 📱 **响应式设计** - 支持移动端和桌面端
- 🎨 **现代化UI** - 使用CSS Grid和Flexbox布局
- ⚡ **快速开发** - 预配置的开发环境
- 🛠️ **易于扩展** - 模块化的代码结构

## 🎯 开发指南

### CSS

- `css/reset.css` - CSS重置样式，消除浏览器默认样式差异
- `css/style.css` - 主要样式文件，包含：
  - CSS变量定义
  - 响应式布局
  - 动画效果
  - 组件样式

### JavaScript

- `js/main.js` - 主要JavaScript文件，包含：
  - 应用初始化
  - 事件处理
  - 工具函数
  - 交互效果

### 添加新页面

1. 在根目录创建新的HTML文件
2. 在HTML文件中引入CSS和JS文件
3. 根据需要添加特定的样式和脚本

### 自定义样式

项目使用CSS变量来管理主题色彩：

```css
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    /* 更多变量... */
}
```

## 🔧 配置说明

### Live Server 配置

开发服务器使用 `live-server`，配置参数：

- `--port=3000` - 端口号
- `--host=localhost` - 主机地址
- `--open` - 自动打开浏览器
- `--watch=.` - 监听文件变化

### 包管理器

项目使用 `pnpm` 作为包管理器，版本：`10.13.1`

## 📝 使用建议

1. **开发流程**
   - 启动 `pnpm dev`
   - 修改文件会自动刷新浏览器
   - 使用浏览器开发者工具调试

2. **代码组织**
   - 保持HTML语义化
   - CSS使用BEM命名规范
   - JavaScript使用模块化编程

3. **性能优化**
   - 压缩图片资源
   - 合理使用CSS动画
   - 避免不必要的DOM操作

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

ISC License