mirror of
https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network.git
synced 2026-02-04 15:05:54 +08:00
241 lines
5.0 KiB
Markdown
241 lines
5.0 KiB
Markdown
# 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
|
|
**更新时间**: 2025年8月
|
|
**维护者**: 吴佳伟 |