# vite-vue-html

**Repository Path**: Mo-jon_admin/vite-vue-html

## Basic Information

- **Project Name**: vite-vue-html
- **Description**: 一个基于 Vite、Vue 和 HTML 的开源项目，旨在提供快速、高效的前端开发体验，适用于现代 Web 应用的构建。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-01-16
- **Last Updated**: 2026-01-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vite + Vue 3 + HTML 项目

这是一个基于 Vite、Vue 3 和 HTML 的前端项目，采用组件化开发方式，结合 Tailwind CSS 实现现代化的 UI 设计。

## 技术栈

- **构建工具**：Vite
- **前端框架**：Vue 3.5.26
- **样式框架**：Tailwind CSS 4.1.18
- **JavaScript 库**：jQuery
- **代码格式化**：Prettier

## 项目结构

```
vite-vue-html/
├── assets/              # 静态资源目录
│   ├── css/            # CSS 文件
│   ├── img/            # 图片资源
│   └── js/             # JavaScript 文件
├── components/         # Vue 组件
├── plugins/            # Vite 自定义插件
├── public/             # 公共资源
├── index.html          # 首页
├── about.html          # 关于页面
├── list.html           # 列表页面
├── package.json        # 项目配置
├── pages.config.js     # 页面配置
├── prettier.config.mjs # Prettier 配置
└── vite.config.js      # Vite 配置
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

启动开发服务器后，访问 `http://localhost:5173` 查看项目。

### 构建项目

```bash
npm run build
```

构建后的文件将输出到 `dist` 目录。

## 使用说明

### 页面开发

项目支持多页面开发，所有 HTML 文件直接放在项目根目录下，`pages.config.js` 会自动识别并构建所有 HTML 文件。

### 样式管理

项目使用 Tailwind CSS 结合自定义 CSS 文件的方式进行样式管理：

1. **variable.css**：定义全局 CSS 变量

   ```css
   :root {
     --background-primary: #f8f8f8;
   }
   ```

2. **public.css**：定义全局布局和基础样式
   - 页面整体布局
   - 组件容器样式
   - 基础 HTML 元素样式

3. **Tailwind CSS**：通过 CDN 引入，用于快速构建现代化 UI
   ```html
   <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
   ```

## 自定义插件

项目包含自定义的 Vite 插件 `html-vue-ssr.js`，用于处理 Vue 组件在 HTML 中的使用和 SSR 渲染。

### 插件功能

1. **htmlVueSsr**：
   - 处理 Vue SSR 渲染，将 Vue 组件转换为 HTML 代码
   - 支持自定义组件传入

2. **htmlVueSsrPrettier**：
   - 使用 Prettier 格式化输出的 HTML
   - 支持自定义 Prettier 配置
   - 默认配置：
     ```javascript
     {
       useTabs: false,
       singleQuote: true,
       semi: true,
       printWidth: 200,
       htmlWhitespaceSensitivity: 'ignore'
     }
     ```

3. **htmlVueSsrCopy**：
   - 复制静态资源目录到构建目录
   - 自动处理目录的删除和创建

4. **htmlVueSsrDeleteNote**：
   - 删除 HTML 中的注释信息
   - 优化最终输出的 HTML 代码

## 构建与部署

### 构建配置

在 `vite.config.js` 中配置构建选项：

### 部署

将构建后的 `dist` 目录部署到任何静态文件服务器即可。

## 许可证

ISC