企业门户网站模板

这是一个基于 Vue3 + TypeScript + Tailwind CSS 构建的现代企业门户网站模板。

特性

• 🎨 现代设计 - 使用 Tailwind CSS 构建的响应式设计
• ⚡ 高性能 - Vue3 + Vite 构建，快速加载
• 🔧 易于配置 - 通过 JSON 配置文件即可自定义所有内容
• 📱 移动友好 - 完全响应式设计，适配所有设备
• 🎯 SEO 优化 - 内置 SEO 优化功能
• 🌈 组件化 - 使用 Reka-UI 组件库

快速开始

1. 安装依赖

npm install

2. 配置网站内容

复制配置模板文件：

cp config.template.json public/config.json

编辑 public/config.json 文件，修改为您的公司信息。

3. 启动开发服务器

npm run dev

4. 构建生产版本

npm run build

配置说明

网站的所有内容都通过 public/config.json 文件进行配置。配置文件包含以下部分：

基础信息 (site)

• title: 网站标题，显示在浏览器标签页
• description: 网站描述，用于 SEO
• keywords: 关键词，用于 SEO
• logo: 品牌标识信息

导航菜单 (navigation)

配置网站的主导航菜单项。

首页内容 (home)

• hero: 首页头部区域
• features: 特色功能展示
• stats: 统计数据展示
• cta: 行动号召区域

服务页面 (services)

配置服务页面的所有内容。

关于页面 (about)

配置关于我们页面的内容。

联系页面 (contact)

配置联系信息和表单。

页脚 (footer)

配置页脚的链接和信息。

主题 (theme)

配置网站的颜色主题。

可用图标

模板内置了以下图标，可在配置中使用：

• lightning - 闪电（速度、性能）
• shield - 盾牌（安全、保护）
• globe - 地球（全球、网络）
• package - 包裹（软件包、服务）
• container - 容器（Docker、容器化）
• code - 代码（开发、编程）
• server - 服务器（基础设施）
• database - 数据库（数据存储）
• settings - 设置（配置、定制）

可用颜色

支持以下颜色主题：

• blue - 蓝色
• green - 绿色
• purple - 紫色
• red - 红色
• yellow - 黄色

文件结构

echo-portal/
├── public/
│   ├── config.json          # 网站配置文件
│   ├── favicon.svg          # 网站图标
│   └── index.html
├── src/
│   ├── components/          # Vue 组件
│   │   ├── AppHeader.vue    # 顶部导航
│   │   └── AppFooter.vue    # 底部
│   ├── views/               # 页面组件
│   │   ├── Home.vue         # 首页
│   │   ├── Services.vue     # 服务页
│   │   ├── About.vue        # 关于页
│   │   └── Contact.vue      # 联系页
│   ├── composables/         # Vue 组合式函数
│   │   └── useConfig.ts     # 配置管理
│   ├── router/              # 路由配置
│   └── assets/              # 静态资源
└── config.template.json     # 配置文件模板

自定义指南

添加新页面

1. 在 src/views/ 目录下创建新的 Vue 组件
2. 在 src/router/index.ts 中添加路由
3. 在配置文件中添加导航菜单项
4. 在配置文件中添加页面相关配置

修改样式

模板使用 Tailwind CSS，您可以：

1. 修改 src/assets/main.css 中的样式
2. 在组件中使用 Tailwind CSS 类名
3. 在配置文件中修改主题颜色

添加新功能

1. 创建新的 Vue 组件
2. 在配置文件中添加相关配置项
3. 在 useConfig.ts 中添加配置读取逻辑

部署

构建完成后，将 dist 目录的内容部署到您的服务器即可。

确保服务器支持 SPA 路由，可能需要配置服务器重定向规则。

许可证

MIT License

技术支持

如有问题，请查看配置模板文件中的说明，或联系技术支持。