docs: update README for Vue-only project
This commit is contained in:
@@ -1,189 +1,60 @@
|
||||
# SOC-LINK Web - Vue3 企业官网
|
||||
# SOC-LINK Web
|
||||
|
||||
基于 Vue3 + TypeScript + Vite 构建的现代化企业官网前端项目。
|
||||
基于 Vue 3 + TypeScript + Vite 构建的企业官网前端项目。
|
||||
|
||||
## 🚀 技术栈
|
||||
## 技术栈
|
||||
|
||||
| 技术 | 版本 | 说明 |
|
||||
|------|------|------|
|
||||
| Vue 3 | ^3.4 | 前端框架 |
|
||||
| TypeScript | ^5.3 | 类型系统 |
|
||||
| Vite | ^5.1 | 构建工具 |
|
||||
| Vue Router | ^4.3 | 路由管理 |
|
||||
| Pinia | ^2.1 | 状态管理 |
|
||||
| Vue I18n | ^9 | 国际化 |
|
||||
| Swiper | ^11 | 轮播组件 |
|
||||
| AOS | ^2.3 | 滚动动画 |
|
||||
| Remix Icon | 4.1 | 图标库 |
|
||||
- **Vue 3.4** - Composition API
|
||||
- **TypeScript 5.3**
|
||||
- **Vite 5.1** - 构建工具
|
||||
- **Vue Router 4** - 路由管理
|
||||
- **Pinia 2** - 状态管理
|
||||
- **vue-i18n 9** - 国际化（中文/英文）
|
||||
- **Axios** - HTTP 请求
|
||||
- **Swiper** - 轮播组件
|
||||
- **AOS** - 滚动动画
|
||||
|
||||
## 📁 项目结构
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── public/
|
||||
│ ├── fonts/ # 阿里巴巴普惠体字体
|
||||
│ └── images/ # 静态图片资源
|
||||
├── src/
|
||||
│ ├── api/ # API 数据
|
||||
│ │ └── mockData.ts # 模拟数据
|
||||
│ ├── assets/
|
||||
│ │ └── css/ # 全局样式
|
||||
│ ├── components/ # 公共组件
|
||||
│ │ ├── NavBar.vue # 现代化导航栏
|
||||
│ │ ├── AppFooter.vue # 底部栏
|
||||
│ │ ├── BackToTop.vue # 回到顶部
|
||||
│ │ └── ContactSection.vue # 联系表单
|
||||
│ ├── locales/ # 国际化语言包
|
||||
│ │ ├── zh.ts # 中文
|
||||
│ │ ├── en.ts # 英文
|
||||
│ │ └── index.ts # i18n 配置
|
||||
│ ├── router/ # 路由配置
|
||||
│ ├── stores/ # Pinia 状态管理
|
||||
│ ├── views/ # 页面组件
|
||||
│ │ ├── HomeView.vue # 首页
|
||||
│ │ ├── AboutView.vue # 关于我们
|
||||
│ │ ├── ProductIndexView.vue # 产品首页
|
||||
│ │ ├── ProductListsView.vue # 产品列表
|
||||
│ │ ├── ProductDetailView.vue# 产品详情
|
||||
│ │ ├── CasesView.vue # 案例中心
|
||||
│ │ ├── CasesDetailView.vue # 案例详情
|
||||
│ │ ├── MasterView.vue # PCB大师之路
|
||||
│ │ ├── MasterTeacherView.vue # 师资硬件
|
||||
│ │ ├── MasterBlogView.vue # 菁英学堂
|
||||
│ │ ├── MasterBlogDetailView.vue # 文章详情
|
||||
│ │ ├── ContactView.vue # 联系我们
|
||||
│ │ └── NotFoundView.vue # 404页面
|
||||
│ ├── App.vue # 根组件
|
||||
│ ├── main.ts # 入口文件
|
||||
│ └── i18n.ts # i18n 实例
|
||||
├── .gitignore
|
||||
├── index.html
|
||||
├── package.json
|
||||
├── tsconfig.json
|
||||
└── vite.config.ts
|
||||
```
|
||||
|
||||
## 🛠️ 开发指南
|
||||
|
||||
### 安装依赖
|
||||
## 快速开始
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
# 安装依赖
|
||||
npm install
|
||||
```
|
||||
|
||||
### 启动开发服务器
|
||||
|
||||
```bash
|
||||
# 启动开发服务器 (localhost:3000)
|
||||
npm run dev
|
||||
```
|
||||
|
||||
访问 http://localhost:3000
|
||||
|
||||
### 构建生产版本
|
||||
|
||||
```bash
|
||||
# 构建生产版本
|
||||
npm run build
|
||||
```
|
||||
|
||||
构建产物输出到 `dist/` 目录。
|
||||
|
||||
### 预览生产版本
|
||||
|
||||
```bash
|
||||
# 预览构建结果
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## 🌐 国际化
|
||||
## 项目结构
|
||||
|
||||
项目支持中文/英文切换，使用 vue-i18n 实现。
|
||||
|
||||
### 语言文件
|
||||
|
||||
- `src/locales/zh.ts` - 中文翻译
|
||||
- `src/locales/en.ts` - 英文翻译
|
||||
|
||||
### 使用方式
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t, locale } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ t('nav.home') }}</h1>
|
||||
<button @click="locale = locale === 'zh' ? 'en' : 'zh'">切换语言</button>
|
||||
</template>
|
||||
```
|
||||
├── index.html # 入口 HTML
|
||||
├── vite.config.ts # Vite 配置
|
||||
├── tsconfig.json # TypeScript 配置
|
||||
├── package.json # 依赖管理
|
||||
├── public/ # 静态资源
|
||||
│ └── images/ # 图片资源
|
||||
└── src/
|
||||
├── main.ts # 应用入口
|
||||
├── App.vue # 根组件
|
||||
├── api/ # API 接口
|
||||
├── assets/ # 样式资源
|
||||
├── components/ # 公共组件
|
||||
├── locales/ # 国际化文件
|
||||
├── router/ # 路由配置
|
||||
├── stores/ # Pinia 状态管理
|
||||
└── views/ # 页面视图
|
||||
```
|
||||
|
||||
### 添加新翻译
|
||||
## 页面
|
||||
|
||||
1. 在 `zh.ts` 中添加中文键值
|
||||
2. 在 `en.ts` 中添加对应英文翻译
|
||||
3. 在组件中使用 `t('key')` 调用
|
||||
- 首页、关于我们、产品中心、大师团队、案例展示、博客、联系我们
|
||||
|
||||
## 📱 响应式设计
|
||||
## License
|
||||
|
||||
| 断点 | 设备 | 导航方式 |
|
||||
|------|------|----------|
|
||||
| > 1024px | 桌面端 | 完整菜单 |
|
||||
| 768-1024px | 平板端 | 简化菜单 + 汉堡按钮 |
|
||||
| < 768px | 移动端 | 全屏侧滑菜单 |
|
||||
|
||||
## 🎨 设计规范
|
||||
|
||||
### 品牌色
|
||||
|
||||
```css
|
||||
--primary: #03388c; /* 主色 */
|
||||
--primary-dark: #0a1628; /* 深色背景 */
|
||||
--accent: #63b3ed; /* 强调色 */
|
||||
--text: #1d1c1c; /* 主文字 */
|
||||
--text-light: #666; /* 次要文字 */
|
||||
```
|
||||
|
||||
### 字体
|
||||
|
||||
使用阿里巴巴普惠体（Alibaba PuHuiTi），字体文件位于 `public/fonts/`。
|
||||
|
||||
## 📄 页面路由
|
||||
|
||||
| 路径 | 页面 | 说明 |
|
||||
|------|------|------|
|
||||
| `/` | 首页 | Banner、服务产品、PCB大师、优势展示 |
|
||||
| `/about` | 关于我们 | 公司介绍、发展历程、团队优势 |
|
||||
| `/product` | 产品首页 | 全部产品分类展示 |
|
||||
| `/product/lists/:pid` | 产品列表 | 按分类筛选产品 |
|
||||
| `/product/view/:id` | 产品详情 | 产品详细信息 |
|
||||
| `/cases` | 案例中心 | 成功案例展示 |
|
||||
| `/cases/view/:id` | 案例详情 | 案例详细内容 |
|
||||
| `/master` | PCB大师之路 | 课程介绍 |
|
||||
| `/master/teacher` | 师资硬件 | 教学团队 |
|
||||
| `/master/blog` | 菁英学堂 | 技术文章 |
|
||||
| `/master/blog/:id` | 文章详情 | 文章内容 |
|
||||
| `/contact` | 联系我们 | 联系方式 |
|
||||
|
||||
## 🔧 后续对接
|
||||
|
||||
当前使用模拟数据（`src/api/mockData.ts`），正式上线需：
|
||||
|
||||
1. 替换为真实 API 接口
|
||||
2. 配置 Vite 代理指向后端
|
||||
3. 对接用户认证系统
|
||||
|
||||
## 📝 更新日志
|
||||
|
||||
### v1.0.0 (2026-06-11)
|
||||
|
||||
- ✅ Vue3 + TypeScript + Vite 项目初始化
|
||||
- ✅ 响应式导航栏（桌面端 + 移动端）
|
||||
- ✅ 中英文国际化支持
|
||||
- ✅ 完整页面：首页、关于我们、产品服务、案例、联系我们、PCB大师之路
|
||||
- ✅ Swiper 轮播 + AOS 滚动动画
|
||||
- ✅ 阿里巴巴普惠体字体
|
||||
- ✅ 生产环境打包优化
|
||||
|
||||
---
|
||||
|
||||
**北京芯联方圆科技有限公司** © 2026
|
||||
MIT
|
||||
|
||||
Reference in New Issue
Block a user