wu-lazy-cloud-network/website/README.md

Wu-Lazy-Cloud-Network 官方网站

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

🚀 快速开始

环境要求

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

安装依赖

# 使用 npm
npm install

# 或使用 yarn
yarn install

开发模式

# 启动开发服务器
npm run dev

# 或使用 yarn
yarn dev

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

构建生产版本

# 构建生产版本
npm run build

# 或使用 yarn
yarn build

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

预览生产版本

# 预览生产版本
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

📦 构建部署

构建生产版本

npm run build

部署到静态服务器

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

Docker 部署

# 使用 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 许可证。

📞 联系我们

• 邮箱: 1207537021@qq.com
• 项目地址:
  • Gitee
  • GitHub

---

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