跳到主要内容

官方网站

官方网站是基于 Vue 3 + Vite 构建的展示型网站，用于产品展示和品牌宣传。

技术栈​

  • 框架: Vue 3 + TypeScript
  • 构建工具: Vite
  • UI: TDesign Vue Next
  • 动画: GSAP
  • 样式: UnoCSS
  • SEO: Vue Meta

核心功能​

产品展示​

  • 产品介绍
  • 功能特性
  • 价格方案
  • 客户案例

营销功能​

  • 首页营销
  • 内容营销
  • SEO 优化
  • 数据统计

用户互动​

  • 在线客服
  • 用户反馈
  • 活动报名
  • 订阅管理

页面结构​

营销页面​

  • 首页
  • 产品页
  • 价格页
  • 案例页

内容页面​

  • 关于我们
  • 新闻动态
  • 帮助中心
  • 联系我们

用户页面​

  • 用户登录
  • 个人中心
  • 订单管理
  • 设置页面

开发指南​

环境搭建​

cd hosts/website
pnpm install
pnpm dev

构建部署​

# 开发环境
pnpm dev

# 生产环境
pnpm build

# 预览构建
pnpm preview

项目结构​

src/
├── api/                # API 接口
├── assets/             # 静态资源
├── components/         # 组件
├── layouts/            # 布局
├── pages/              # 页面
├── plugins/            # 插件
├── router/             # 路由
├── stores/             # 状态管理
├── styles/             # 样式
├── types/              # 类型定义
└── utils/              # 工具函数

设计规范​

视觉设计​

  • 品牌色彩
  • 字体规范
  • 间距规范
  • 组件规范

交互设计​

  • 动画效果
  • 响应式设计
  • 无障碍访问
  • 加载状态

性能优化​

加载优化​

  • 图片懒加载
  • 代码分割
  • 资源压缩
  • CDN 加速

SEO 优化​

  • 元标签管理
  • 结构化数据
  • 站点地图
  • 内链优化

部署配置​

环境变量​

  • VITE_API_URL: API 地址
  • VITE_SITE_URL: 网站地址
  • VITE_ANALYTICS_ID: 分析 ID

构建配置​

  • 目标环境：现代浏览器
  • 输出目录：dist
  • 资源优化：开启