# build-html

**Repository Path**: Mo-jon_admin/build-html

## Basic Information

- **Project Name**: build-html
- **Description**: 一个基于 Vue 3 和 Webpack 的现代化前端项目模板，专注于提供高效的开发体验和灵活的构建功能。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-17
- **Last Updated**: 2025-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Demo

一个基于 Vue 3 和 Webpack 的现代化前端项目模板，专注于提供高效的开发体验和灵活的构建功能。

## 项目特点

- **自动 HTML 构建**: 自动扫描 `src` 目录下的 HTML 文件并进行构建
- **Vue 模板支持**: 支持在 HTML 模板中使用 Vue 语法
- **热重载**: 开发过程中支持实时预览和热重载
- **模板系统**: 支持模板拆分和复用
- **模块化结构**: 清晰的项目目录结构

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run serve
```

开发服务器将在 `http://localhost:8803` 启动。

### 构建生产版本

```bash
npm run build
```

构建后的文件将位于 `dist` 目录。

## 项目结构

```
├── config/          # 构建配置目录
│   ├── BuildHtml.js     # HTML自动构建插件
│   ├── VueLoad.js       # Vue语法解析插件
│   ├── HotReload.js     # 热重载插件
│   ├── webpack.develop.js  # 开发环境webpack配置
│   └── webpack.product.js  # 生产环境webpack配置
├── src/             # 源代码目录
│   ├── css/         # 样式文件
│   ├── images/      # 图片资源
│   ├── js/          # JavaScript文件
│   ├── template/    # HTML模板组件
│   └── index.html   # 主页面
├── package.json     # 项目配置文件
└── README.md        # 项目说明文档
```

## 核心功能说明

### 1. 自动构建功能

`config` 目录下的 `BuildHtml.js` 实现了自动 HTML 构建功能：

- 自动扫描 `src` 目录下所有 HTML 文件
- 自动引入对应的 CSS 和 JavaScript 文件
- 集成模板系统，支持模板复用

### 2. Vue 语法支持

项目通过 `VueLoad.js` 插件实现了在 HTML 模板中使用 Vue 语法：

- 使用 `createSSRApp` 创建 Vue 应用
- 支持数据绑定、指令等 Vue 特性
- 可以在模板中访问传入的数据

### 3. 模板系统

`template` 目录用于存放可复用的 HTML 组件：

- 支持使用 Vue 语法
- **注意**: 修改 `template` 目录下的文件后，需要重启项目才能生效
- 模板文件会自动集成到主页面中

### 4. 热重载

`HotReload.js` 插件实现了开发过程中的热重载功能：

- 监听文件变化并自动刷新浏览器
- 提供更好的开发体验

## 模板使用说明

### 在模板中使用 Vue 语法

```html
<!-- template/header.html -->
<header>
  <h1>{{ title }}</h1>
  <nav>
    <ul>
      <li v-for="item in navItems" :key="item.id">
        <a :href="item.url">{{ item.text }}</a>
      </li>
    </ul>
  </nav>
</header>
```
### 数据传递

在 `VueLoad.js` 中，可以通过 `createSSRApp` 传入数据，这些数据会在模板中渲染：

```javascript
createSSRApp({
  data: () => ({ 
    filename: data.plugin.options.filename, 
    title: titleData[data.plugin.options.filename],
    // 可以在这里添加更多数据
    navItems: [
      { id: 1, text: '首页', url: './index.html' },
      { id: 2, text: '关于', url: './about.html' }
    ]
  }),
  template: data.html,
})
```

## 注意事项

1. **模板修改后需要重启**: 修改 `template` 目录下的文件后，需要重启开发服务器才能看到变化
2. **文件命名规范**: 页面的 CSS 和 JS 文件应该与 HTML 文件同名
3. **静态资源**: 所有静态资源应放在 `src` 目录下对应的子目录中

## 开发建议

- 使用 `npm run serve` 进行开发，享受热重载带来的便利
- 将可复用的组件放在 `template` 目录下
- 遵循模块化开发原则，合理组织代码结构
- 在生产部署前使用 `npm run build` 构建优化版本

## 许可证

ISC