小鹿骑行 - 共享电动车系统官网

这是一个基于 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
• 返回格式:

{
  "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 请求失败时显示默认图片
• 空数据时显示默认横幅图片

使用方法:

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

安装依赖

# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install

# 或使用 bun
bun install

开发服务器

启动开发服务器（默认端口 3008）：

# 使用 pnpm
pnpm dev

# 或使用 npm
npm run dev

# 或使用 yarn
yarn dev

# 或使用 bun
bun run dev

开发服务器将在 http://localhost:3008 启动。

构建生产版本

# 使用 pnpm
pnpm build

# 或使用 npm
npm run build

# 或使用 yarn
yarn build

# 或使用 bun
bun run build

预览生产构建

# 使用 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 部署文档 了解更多部署选项。

---

开发公司: 创特物联科技（福鼎）有限公司
联系电话: 15280659990
联系邮箱: 564737095@qq.com