You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
3.9 KiB
157 lines
3.9 KiB
2 months ago
|
# 企业门户网站模板
|
||
|
|
|
||
|
|
这是一个基于 Vue3 + TypeScript + Tailwind CSS 构建的现代企业门户网站模板。
|
||
|
|
|
||
|
|
## 特性
|
||
|
|
|
||
|
|
- 🎨 **现代设计** - 使用 Tailwind CSS 构建的响应式设计
|
||
|
|
- ⚡ **高性能** - Vue3 + Vite 构建，快速加载
|
||
|
|
- 🔧 **易于配置** - 通过 JSON 配置文件即可自定义所有内容
|
||
|
|
- 📱 **移动友好** - 完全响应式设计，适配所有设备
|
||
|
|
- 🎯 **SEO 优化** - 内置 SEO 优化功能
|
||
|
|
- 🌈 **组件化** - 使用 Reka-UI 组件库
|
||
|
|
|
||
|
|
## 快速开始
|
||
|
|
|
||
|
|
### 1. 安装依赖
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2. 配置网站内容
|
||
|
|
|
||
|
|
复制配置模板文件：
|
||
|
|
```bash
|
||
|
|
cp config.template.json public/config.json
|
||
|
|
```
|
||
|
|
|
||
|
|
编辑 `public/config.json` 文件，修改为您的公司信息。
|
||
|
|
|
||
|
|
### 3. 启动开发服务器
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev
|
||
|
|
```
|
||
|
|
|
||
|
|
### 4. 构建生产版本
|
||
|
|
|
||
|
|
```bash
|
||
|
|
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
|
||
|
|
|
||
|
|
## 技术支持
|
||
|
|
|
||
|
|
如有问题，请查看配置模板文件中的说明，或联系技术支持。
|