# Wu-Lazy-Cloud-Network 官方网站

这是 Wu-Lazy-Cloud-Network 项目的官方网站，基于 Vue 3 + Element Plus 构建。

## 🚀 快速开始

### 环境要求

- Node.js 16.0+
- npm 8.0+ 或 yarn 1.22+

### 安装依赖

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install
```

### 开发模式

```bash
# 启动开发服务器
npm run dev

# 或使用 yarn
yarn dev
```

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

### 构建生产版本

```bash
# 构建生产版本
npm run build

# 或使用 yarn
yarn build
```

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

### 预览生产版本

```bash
# 预览生产版本
npm run preview

# 或使用 yarn
yarn preview
```

## 📁 项目结构

```
website/
├── public/                 # 静态资源
├── src/
│   ├── assets/            # 资源文件
│   │   ├── images/        # 图片资源
│   │   └── styles/        # 样式文件
│   ├── components/        # 公共组件
│   │   ├── Header.vue     # 头部导航
│   │   └── Footer.vue     # 底部组件
│   ├── router/            # 路由配置
│   │   └── index.js
│   ├── stores/            # 状态管理
│   ├── utils/             # 工具函数
│   │   └── index.js
│   ├── views/             # 页面组件
│   │   ├── Home.vue       # 首页
│   │   ├── Features.vue   # 功能特性
│   │   ├── Architecture.vue # 系统架构
│   │   ├── Docs.vue       # 使用文档
│   │   ├── Download.vue   # 下载安装
│   │   └── About.vue      # 关于我们
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── index.html             # HTML 模板
├── package.json           # 项目配置
├── vite.config.js         # Vite 配置
└── README.md              # 项目说明
```

## 🎨 页面说明

### 首页 (Home.vue)
- 项目介绍和核心功能展示
- 技术栈和快速开始指南
- 统计数据展示

### 功能特性 (Features.vue)
- 详细的功能介绍
- 内网穿透、网络代理、流量监控等功能说明
- 安全特性展示

### 系统架构 (Architecture.vue)
- 整体架构图
- 模块架构说明
- 数据流架构
- 技术栈介绍

### 使用文档 (Docs.vue)
- 快速开始指南
- 安装部署说明
- 配置参数详解
- 使用指南和故障排除

### 下载安装 (Download.vue)
- 版本信息
- 多种下载方式
- 部署指南
- 系统要求

### 关于我们 (About.vue)
- 项目背景和核心价值
- 开发团队介绍
- 技术栈详情
- 发展路线图
- 联系方式

## 🛠️ 技术栈

- **Vue 3**: 渐进式 JavaScript 框架
- **Vue Router**: 官方路由管理器
- **Pinia**: 状态管理库
- **Element Plus**: Vue 3 组件库
- **Vite**: 下一代前端构建工具
- **SCSS**: CSS 预处理器
- **Prism.js**: 代码高亮
- **Marked**: Markdown 解析器

## 🎯 主要功能

### 响应式设计
- 支持桌面端和移动端
- 自适应布局
- 触摸友好的交互

### 代码高亮
- 支持多种编程语言
- 语法高亮显示
- 复制代码功能

### 性能优化
- 路由懒加载
- 组件按需加载
- 图片懒加载
- 代码分割

### SEO 友好
- 语义化 HTML
- Meta 标签优化
- 结构化数据

## 🔧 开发指南

### 添加新页面

1. 在 `src/views/` 目录下创建新的 Vue 组件
2. 在 `src/router/index.js` 中添加路由配置
3. 在 `src/components/Header.vue` 中添加导航链接

### 添加新组件

1. 在 `src/components/` 目录下创建组件
2. 在需要使用的页面中导入并使用

### 样式开发

- 使用 SCSS 编写样式
- 遵循 BEM 命名规范
- 使用 CSS 变量管理主题色彩
- 响应式设计使用媒体查询

### 代码规范

- 使用 ESLint 进行代码检查
- 使用 Prettier 进行代码格式化
- 遵循 Vue 3 组合式 API 规范
- 组件命名使用 PascalCase
- 文件名使用 kebab-case

## 📦 构建部署

### 构建生产版本

```bash
npm run build
```

### 部署到静态服务器

构建完成后，将 `dist` 目录的内容部署到 Web 服务器即可。

### Docker 部署

```dockerfile
# 使用 nginx 镜像
FROM nginx:alpine

# 复制构建文件
COPY dist/ /usr/share/nginx/html/

# 复制 nginx 配置
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露端口
EXPOSE 80

# 启动 nginx
CMD ["nginx", "-g", "daemon off;"]
```

## 🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 [Apache License 2.0](LICENSE) 许可证。

## 📞 联系我们

- **邮箱**: 1207537021@qq.com
- **项目地址**: 
  - [Gitee](https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network)
  - [GitHub](https://github.com/wujiawei1207537021/wu-lazy-cloud-network)

---

**版本**: 1.0.0  
**更新时间**: 2024年12月  
**维护者**: 吴佳伟