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)。
|