233 lines
5.4 KiB
Markdown
233 lines
5.4 KiB
Markdown
# 小鹿骑行 - 共享电动车系统官网
|
||
|
||
这是一个基于 Nuxt 4 开发的官网项目，展示创特物联科技的 OEM 电动车共享系统解决方案。
|
||
|
||
## 项目简介
|
||
|
||
本项目是创特物联科技（福鼎）有限公司的官方网站，主要展示公司提供的共享电动车系统解决方案，包括客户端/商户端小程序、智能中控硬件及管理系统等服务内容。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: Nuxt 4
|
||
- **UI 组件库**: @nuxt/ui (基于 Tailwind CSS)
|
||
- **地图服务**: 高德地图 (AMap)
|
||
- **语言**: TypeScript
|
||
- **包管理工具**: pnpm
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
bike/
|
||
├── app/
|
||
│ ├── components/ # 组件目录
|
||
│ │ ├── AMapComponent.vue # 高德地图组件
|
||
│ │ ├── AppHeader.vue # 页面头部组件
|
||
│ │ ├── AppFooter.vue # 页面底部组件
|
||
│ │ ├── ScrollToTop.vue # 返回顶部组件
|
||
│ │ └── ...
|
||
│ ├── config/ # 配置文件目录
|
||
│ │ ├── api.ts # API 接口配置
|
||
│ │ └── amap.ts # 高德地图配置
|
||
│ ├── pages/ # 页面目录
|
||
│ │ └── index/ # 首页
|
||
│ ├── layouts/ # 布局文件
|
||
│ └── assets/ # 静态资源
|
||
├── public/ # 公共静态文件
|
||
└── nuxt.config.ts # Nuxt 配置文件
|
||
```
|
||
|
||
## 功能说明
|
||
|
||
### 1. 首页轮播图功能
|
||
|
||
**功能描述**: 首页顶部轮播图从后端 API 动态获取图片数据。
|
||
|
||
**API 接口**:
|
||
- **地址**: `https://ele.ccttiot.com/prod-api/app/owBanner/list`
|
||
- **方法**: GET
|
||
- **返回格式**:
|
||
```json
|
||
{
|
||
"msg": "操作成功",
|
||
"code": 200,
|
||
"data": [
|
||
{
|
||
"id": "7",
|
||
"imgUrl": "https://api.ccttiot.com/index23-1760143682052.png",
|
||
"status": "1",
|
||
"orderNum": "100",
|
||
...
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
**实现位置**:
|
||
- **API 配置**: `app/config/api.ts` - 定义了 `getBannerList()` 函数
|
||
- **页面使用**: `app/pages/index/index.vue` - 首页中调用并显示轮播图
|
||
|
||
**功能特点**:
|
||
- 自动过滤启用的轮播图（status === '1'）
|
||
- 按 orderNum 降序排列（数字越大越靠前）
|
||
- 加载状态显示
|
||
- 错误处理：API 请求失败时显示默认图片
|
||
- 空数据时显示默认横幅图片
|
||
|
||
**使用方法**:
|
||
```typescript
|
||
import { getBannerList } from '~/config/api'
|
||
|
||
// 获取轮播图列表
|
||
const banners = await getBannerList()
|
||
// 返回已过滤和排序的轮播图数组
|
||
```
|
||
|
||
### 2. 高德地图组件
|
||
|
||
**功能描述**: 在首页展示公司位置的高德地图，包含自定义标记点。
|
||
|
||
**配置文件**: `app/config/amap.ts`
|
||
- 配置高德地图 API Key 和安全密钥
|
||
- 提供地图脚本 URL 生成函数
|
||
|
||
**组件使用**: `app/components/AMapComponent.vue`
|
||
- 支持 2D/3D 视图切换
|
||
- 支持自定义标记点
|
||
- 支持地图事件监听
|
||
|
||
### 3. 服务保障展示
|
||
|
||
首页展示三个服务保障模块：
|
||
- 协助维权
|
||
- 虚假赔偿
|
||
- 欺诈赔偿
|
||
|
||
### 4. 联系信息展示
|
||
|
||
展示公司联系方式：
|
||
- 电话：15280659990
|
||
- 邮箱：564737095@qq.com
|
||
- 地址：福建省福鼎市太姥山镇海埕路13号
|
||
- 工作时间：周一至周六 (8:30-12:00 13:30-18:00)
|
||
|
||
## 安装和运行
|
||
|
||
### 前置要求
|
||
|
||
- Node.js 18+
|
||
- pnpm (推荐) 或 npm/yarn/bun
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
# 使用 pnpm (推荐)
|
||
pnpm install
|
||
|
||
# 或使用 npm
|
||
npm install
|
||
|
||
# 或使用 yarn
|
||
yarn install
|
||
|
||
# 或使用 bun
|
||
bun install
|
||
```
|
||
|
||
### 开发服务器
|
||
|
||
启动开发服务器（默认端口 3008）：
|
||
|
||
```bash
|
||
# 使用 pnpm
|
||
pnpm dev
|
||
|
||
# 或使用 npm
|
||
npm run dev
|
||
|
||
# 或使用 yarn
|
||
yarn dev
|
||
|
||
# 或使用 bun
|
||
bun run dev
|
||
```
|
||
|
||
开发服务器将在 `http://localhost:3008` 启动。
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
# 使用 pnpm
|
||
pnpm build
|
||
|
||
# 或使用 npm
|
||
npm run build
|
||
|
||
# 或使用 yarn
|
||
yarn build
|
||
|
||
# 或使用 bun
|
||
bun run build
|
||
```
|
||
|
||
### 预览生产构建
|
||
|
||
```bash
|
||
# 使用 pnpm
|
||
pnpm preview
|
||
|
||
# 或使用 npm
|
||
npm run preview
|
||
|
||
# 或使用 yarn
|
||
yarn preview
|
||
|
||
# 或使用 bun
|
||
bun run preview
|
||
```
|
||
|
||
## 配置说明
|
||
|
||
### API 配置
|
||
|
||
在 `app/config/api.ts` 中可以配置：
|
||
- **API_BASE_URL**: API 基础地址（默认：`https://ele.ccttiot.com/prod-api`）
|
||
|
||
### 高德地图配置
|
||
|
||
在 `app/config/amap.ts` 中需要配置：
|
||
- **AMAP_KEY**: 高德地图 API Key
|
||
- **AMAP_SECURITY_KEY**: 高德地图安全密钥
|
||
|
||
## 项目特点
|
||
|
||
1. **响应式设计**: 使用 Tailwind CSS 实现完全响应式布局
|
||
2. **SEO 优化**: 首页包含完整的 SEO meta 标签和结构化数据
|
||
3. **错误处理**: API 请求包含完善的错误处理机制
|
||
4. **类型安全**: 使用 TypeScript 确保代码类型安全
|
||
5. **组件化**: 功能模块化，便于维护和扩展
|
||
|
||
## 开发注意事项
|
||
|
||
1. **API 接口**: 确保后端 API 服务正常运行，轮播图功能才能正常工作
|
||
2. **地图配置**: 使用高德地图功能前，需要在配置文件中设置正确的 API Key
|
||
3. **图片资源**: 部分静态图片位于 `public/img/` 目录下
|
||
4. **环境变量**: 如需在不同环境使用不同配置，建议使用环境变量
|
||
|
||
## 待改进项
|
||
|
||
1. 考虑将 API 配置迁移到环境变量
|
||
2. 添加图片懒加载优化
|
||
3. 考虑添加轮播图缓存机制
|
||
4. 完善错误日志记录
|
||
5. 添加单元测试
|
||
|
||
## 部署
|
||
|
||
请参考 [Nuxt 部署文档](https://nuxt.com/docs/getting-started/deployment) 了解更多部署选项。
|
||
|
||
---
|
||
|
||
**开发公司**: 创特物联科技（福鼎）有限公司
|
||
**联系电话**: 15280659990
|
||
**联系邮箱**: 564737095@qq.com
|