mirror of
https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network.git
synced 2026-02-04 23:15:52 +08:00
[update] 添加官网项目
This commit is contained in:
wujiawei
241
website/README.md
Normal file
241
website/README.md
Normal file
@@ -0,0 +1,241 @@
|
||||
# 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月
|
||||
**维护者**: 吴佳伟
|
||||
Reference in New Issue
Block a user