CloudSphere/README.md

202 lines
4.4 KiB
Markdown
Raw Normal View History

2025-09-11 14:13:44 +08:00
# ClueFlare - 专业云服务代理平台
2025-09-11 13:36:35 +08:00
2025-09-11 14:13:44 +08:00
ClueFlare 是一个现代化的云服务代理平台,帮助用户轻松连接和访问世界级云服务提供商,包括 AWS、阿里云、腾讯云等。网站采用 Nuxt 3 构建,支持多语言国际化,提供响应式设计和优秀的用户体验。
2025-09-11 13:36:35 +08:00
2025-09-11 14:13:44 +08:00
## ✨ 主要特性
2025-09-11 13:36:35 +08:00
2025-09-11 14:13:44 +08:00
- 🌐 **多语言支持** - 支持英语、简体中文、繁体中文
- 📱 **响应式设计** - 完美适配桌面端和移动端
- 🎨 **现代化UI** - 基于 Tailwind CSS 的美观界面
- 📝 **内容管理** - 集成 Nuxt Content 的博客系统
- 🔍 **SEO优化** - 内置 SEO 优化和元数据管理
-**高性能** - 基于 Nuxt 3 的快速加载体验
- 💬 **在线客服** - 集成 ChatWay 客服系统
2025-09-11 13:36:35 +08:00
2025-09-11 14:13:44 +08:00
## 🚀 技术栈
- **框架**: Nuxt 3
- **前端**: Vue 3 + TypeScript
- **样式**: Tailwind CSS
- **国际化**: @nuxtjs/i18n
- **内容管理**: @nuxt/content
- **SEO**: @nuxtjs/seo
- **构建工具**: Vite
## 📁 项目结构
```
cloudsphere/
├── assets/ # 静态资源
│ └── css/
│ └── main.css # 全局样式
├── components/ # Vue 组件
│ ├── ContactForm.vue # 联系表单
│ ├── Footer.vue # 页脚组件
│ ├── Header.vue # 头部组件
│ └── LanguageSwitcher.vue # 语言切换器
├── content/ # 内容文件
│ ├── en/ # 英文内容
│ ├── zh-hans/ # 简体中文内容
│ └── zh-hant/ # 繁体中文内容
├── i18n/ # 国际化配置
│ └── locales/ # 语言文件
├── layouts/ # 布局文件
│ └── default.vue # 默认布局
├── pages/ # 页面文件
│ ├── blog/ # 博客页面
│ ├── about.vue # 关于页面
│ ├── contact.vue # 联系页面
│ └── index.vue # 首页
├── public/ # 公共静态文件
├── nuxt.config.ts # Nuxt 配置文件
└── package.json # 项目依赖
```
## 🛠️ 开发环境设置
### 环境要求
- Node.js >= 18.0.0
- npm, pnpm, yarn 或 bun
### 安装依赖
```powershell
# 使用 npm
2025-09-11 13:36:35 +08:00
npm install
2025-09-11 14:13:44 +08:00
# 使用 pnpm
2025-09-11 13:36:35 +08:00
pnpm install
2025-09-11 14:13:44 +08:00
# 使用 yarn
2025-09-11 13:36:35 +08:00
yarn install
2025-09-11 14:13:44 +08:00
# 使用 bun
2025-09-11 13:36:35 +08:00
bun install
```
2025-09-11 14:13:44 +08:00
### 启动开发服务器
2025-09-11 13:36:35 +08:00
2025-09-11 14:13:44 +08:00
```powershell
# 使用 npm
2025-09-11 13:36:35 +08:00
npm run dev
2025-09-11 14:13:44 +08:00
# 使用 pnpm
2025-09-11 13:36:35 +08:00
pnpm dev
2025-09-11 14:13:44 +08:00
# 使用 yarn
2025-09-11 13:36:35 +08:00
yarn dev
2025-09-11 14:13:44 +08:00
# 使用 bun
2025-09-11 13:36:35 +08:00
bun run dev
```
2025-09-11 14:13:44 +08:00
开发服务器将在 `http://localhost:3000` 启动。
## 🏗️ 构建和部署
2025-09-11 13:36:35 +08:00
2025-09-11 14:13:44 +08:00
### 构建生产版本
2025-09-11 13:36:35 +08:00
2025-09-11 14:13:44 +08:00
```powershell
# 使用 npm
2025-09-11 13:36:35 +08:00
npm run build
2025-09-11 14:13:44 +08:00
# 使用 pnpm
2025-09-11 13:36:35 +08:00
pnpm build
2025-09-11 14:13:44 +08:00
# 使用 yarn
2025-09-11 13:36:35 +08:00
yarn build
2025-09-11 14:13:44 +08:00
# 使用 bun
2025-09-11 13:36:35 +08:00
bun run build
```
2025-09-11 14:13:44 +08:00
### 预览生产构建
2025-09-11 13:36:35 +08:00
2025-09-11 14:13:44 +08:00
```powershell
# 使用 npm
2025-09-11 13:36:35 +08:00
npm run preview
2025-09-11 14:13:44 +08:00
# 使用 pnpm
2025-09-11 13:36:35 +08:00
pnpm preview
2025-09-11 14:13:44 +08:00
# 使用 yarn
2025-09-11 13:36:35 +08:00
yarn preview
2025-09-11 14:13:44 +08:00
# 使用 bun
2025-09-11 13:36:35 +08:00
bun run preview
```
2025-09-11 14:13:44 +08:00
### 生成静态站点
```powershell
# 使用 npm
npm run generate
# 使用 pnpm
pnpm generate
# 使用 yarn
yarn generate
# 使用 bun
bun run generate
```
## 🌍 多语言配置
项目支持三种语言:
- 英语 (en)
- 简体中文 (zh-hans)
- 繁体中文 (zh-hant)
语言文件位于 `i18n/locales/` 目录下,内容文件位于 `content/` 目录下。
## 📝 内容管理
博客文章使用 Markdown 格式编写,存储在 `content/` 目录下。每篇文章需要包含以下前置元数据:
```yaml
---
title: "文章标题"
description: "文章描述"
date: "2024-01-15"
slug: "article-slug"
locale: "zh-hans"
---
```
## 🎨 样式定制
项目使用 Tailwind CSS 进行样式管理。全局样式文件位于 `assets/css/main.css`,可以通过修改 Tailwind 配置来自定义主题。
## 📱 响应式设计
网站采用移动优先的响应式设计,确保在各种设备上都有良好的用户体验。
## 🔧 开发工具
项目集成了以下开发工具:
- Nuxt DevTools - 开发调试工具
- TypeScript - 类型安全
- ESLint - 代码质量检查
- Prettier - 代码格式化
## 📄 许可证
本项目为私有项目,版权所有。
## 🤝 贡献
如果您想为项目做出贡献,请先联系项目维护者。
## 📞 联系我们
- **Telegram**: @pinnovatecloud
- **WhatsApp**: +1 9174029875
- **网站**: http://clueflare.com
---
更多信息请参考 [Nuxt 官方文档](https://nuxt.com/docs/getting-started/introduction)。