技术特点

技术栈

核心技术特点

1. Vue3组合式API

• 采用script setup语法糖，简化组件编写
• 使用ref、computed等响应式API，实现更灵活的状态管理
• 支持逻辑复用，提高代码可维护性和复用性
• 更好的TypeScript支持，提供完整的类型推导

2. TypeScript类型安全

• 全面的类型定义，确保代码的类型安全
• 自定义模块声明，支持SVG等资源的类型导入
• 严格的编译选项，提前发现潜在问题
• 增强代码的可读性和可维护性，便于团队协作

3. Vite构建优化

• 配置base: './'，确保打包后资源正确加载
• 调整assetsInlineLimit为2KB，优化资源加载策略
• 生成优化的构建输出，提高页面加载速度
• 支持热模块替换，提供快速的开发体验

4. 响应式设计

• 使用CSS Grid和Flexbox实现自适应布局
• 媒体查询适配不同屏幕尺寸
• 移动端友好的导航设计，支持汉堡菜单
• 图片和内容自适应缩放，确保在各种设备上的良好显示

5. 现代CSS特性

• CSS变量（Less变量）实现主题定制
• 渐变背景和阴影效果，增强视觉层次感
• 过渡和动画效果，提升用户体验
• 自定义滚动条样式，优化细节体验

6. 模块化结构

• 清晰的文件目录结构，便于代码组织和管理
• 组件化开发，提高代码复用性
• 样式分离，使用Less预处理器增强样式功能
• 资源集中管理，便于维护和更新

实现细节

1. SVG资源管理

• 所有图片资源使用SVG格式，保证高清显示和小文件体积
• 使用TypeScript模块声明，支持SVG资源的类型导入
• Vite配置确保SVG文件被正确打包，避免Base64内联过大的资源
• 统一的资源导入方式，便于管理和维护

2. 性能优化

• 组件懒加载，减少初始加载时间
• 资源按需加载，优化页面性能
• 平滑滚动实现，提升用户体验
• 优化的CSS选择器，提高样式渲染效率

3. 代码规范

• 严格的TypeScript类型检查
• 清晰的代码注释，便于理解和维护
• 统一的代码风格，提高代码可读性
• 模块化设计，便于扩展和更新

4. 构建配置

• 配置Vite构建选项，确保输出优化的静态资源
• CSS、JS和图片资源统一打包到assets文件夹
• 生成source map，便于调试
• 支持生产环境优化，如代码压缩、tree shaking等

目录结构

d1671/                    # 项目根目录
├── doc/                  # 文档目录
│   ├── projIntro.md      # 项目详细介绍
│   ├── techFeat.md       # 技术特点说明
│   ├── dirStru.md        # 目录结构说明
│   └── userInstr.md      # 使用说明
├── src/                  # 源代码目录
│   ├── assets/           # 静态资源目录
│   │   └── images/       # 图片资源目录，存放所有SVG图片
│   │       ├── logo.svg           # 网站Logo
│   │       ├── about.svg          # 关于我图片
│   │       ├── email.svg          # 邮箱图标
│   │       ├── phone.svg          # 电话图标
│   │       ├── location.svg       # 位置图标
│   │       ├── social1.svg        # 社交媒体图标1
│   │       ├── social2.svg        # 社交媒体图标2
│   │       ├── social3.svg        # 社交媒体图标3
│   │       ├── work1.svg          # 作品图片1
│   │       ├── work2.svg          # 作品图片2
│   │       ├── work3.svg          # 作品图片3
│   │       ├── work4.svg          # 作品图片4
│   │       ├── work5.svg          # 作品图片5
│   │       ├── work6.svg          # 作品图片6
│   │       └── hero-pattern.svg   # 英雄区域背景图案
│   ├── components/       # 组件目录，用于存放Vue组件
│   ├── styles/           # 样式目录
│   │   └── main.less     # 全局样式文件，包含样式重置和变量定义
│   ├── types/            # 类型定义目录，用于存放TypeScript类型定义
│   ├── App.vue           # 应用根组件，包含整个页面布局
│   ├── main.ts           # 应用入口文件，负责初始化Vue应用
│   └── vite-env.d.ts     # Vite环境类型声明，包含SVG模块类型定义
├── index.html            # HTML入口文件，定义页面结构和元信息
├── package.json          # 项目配置文件，包含依赖和脚本命令
├── tsconfig.json         # TypeScript配置文件，设置编译选项
├── tsconfig.node.json    # TypeScript Node配置文件，用于Vite工具
└── vite.config.ts        # Vite配置文件，设置构建选项和插件

目录说明

根目录 (d1671/)

项目的主目录，包含所有项目文件和子目录。

文档目录 (doc/)

存放项目相关文档，包括项目介绍、技术特点、目录结构和使用说明。

源代码目录 (src/)

存放项目的源代码，包括组件、样式、资源和入口文件。

静态资源目录 (assets/)

存放项目所需的静态资源，如图片、字体等。

图片资源目录 (images/)

存放项目中使用的所有SVG图片资源，包括Logo、图标、作品图片和背景图案。

组件目录 (components/)

用于存放Vue组件，便于组件化开发和代码复用。

样式目录 (styles/)

存放项目的样式文件，使用Less预处理器编写，包含全局样式和变量定义。

类型定义目录 (types/)

存放TypeScript类型定义文件，用于增强代码的类型安全性。

配置文件

• package.json：管理项目依赖和脚本命令
• tsconfig.json：设置TypeScript编译选项
• tsconfig.node.json：为Vite工具提供TypeScript配置
• vite.config.ts：配置Vite构建选项，如基础路径、资源内联限制等

入口文件

• index.html：HTML入口文件，定义页面的基本结构和元信息
• src/main.ts：Vue应用的入口文件，负责创建和挂载Vue应用实例
• src/App.vue：Vue应用的根组件，包含整个页面的布局结构

使用说明

环境要求

• Node.js：建议使用LTS版本（v18.x或更高）
• npm：Node.js包管理器，通常随Node.js一起安装
• Git：版本控制系统（可选，用于克隆项目）

安装步骤

1. 克隆或下载项目

如果项目托管在Git仓库中，可以使用以下命令克隆项目：

git clone <repository-url>
cd d1671

如果是直接下载的项目压缩包，解压后进入项目目录：

cd d1671

2. 安装依赖

使用npm安装项目依赖：

npm install

开发流程

1. 启动开发服务器

运行以下命令启动Vite开发服务器：

npm run dev

开发服务器启动后，会在终端显示访问URL（通常是http://localhost:5173）。在浏览器中打开该URL即可查看项目效果。

2. 开发模式特性

• 热模块替换：修改代码后，浏览器会自动刷新，无需手动刷新页面
• 类型检查：实时进行TypeScript类型检查，发现潜在问题
• 错误提示：在浏览器和终端中显示详细的错误信息，便于调试

3. 代码修改

• 修改组件：编辑src/App.vue或src/components/目录下的组件文件
• 修改样式：编辑src/styles/main.less文件
• 添加资源：将新的SVG图片放入src/assets/images/目录
• 修改配置：根据需要调整vite.config.ts、tsconfig.json等配置文件

构建部署

1. 类型检查

在构建前，建议先运行TypeScript类型检查，确保代码类型安全：

npm run type-check

2. 构建项目

运行以下命令构建生产版本：

npm run build

构建完成后，生成的静态文件会存放在dist/目录中。

3. 构建输出

构建输出的dist/目录结构如下：

dist/
├── assets/           # 打包后的资源文件
│   ├── [name]-[hash].js    # JavaScript文件
│   ├── [name]-[hash].css   # CSS文件
│   └── [name]-[hash].svg   # SVG图片文件
└── index.html        # 入口HTML文件

4. 部署

将dist/目录下的所有文件部署到Web服务器或静态网站托管服务即可。

项目配置

Vite配置

主要配置项位于vite.config.ts文件中：

• base: './'：设置基础路径为相对路径，确保打包后资源正确加载
• assetsInlineLimit: 2048：设置资源内联限制为2KB，小于该大小的资源会被内联为Base64
• build.outDir: 'dist'：指定构建输出目录
• build.assetsDir: 'assets'：指定资源输出目录

TypeScript配置

主要配置项位于tsconfig.json文件中：

• strict: true：启用严格模式
• noUnusedLocals: true：禁止未使用的局部变量
• noUnusedParameters: true：禁止未使用的参数
• noFallthroughCasesInSwitch: true：禁止switch语句中的fallthrough情况

代码规范

• 使用TypeScript编写所有代码，确保类型安全
• 组件使用script setup语法糖
• 样式使用Less预处理器，遵循BEM命名规范
• 代码中添加清晰的注释，便于理解和维护
• 遵循ESLint和Prettier规范（如果项目中配置了这些工具）

常见问题

1. 依赖安装失败

• 确保Node.js版本符合要求
• 尝试清除npm缓存：npm cache clean --force
• 尝试使用国内镜像：npm config set registry https://registry.npmmirror.com

2. 构建失败

• 检查TypeScript类型错误：npm run type-check
• 检查代码语法错误
• 检查资源文件路径是否正确

3. 部署后资源加载失败

• 确保Vite配置中的base设置正确
• 检查HTML文件中资源引用路径是否正确
• 确保服务器配置正确，支持相对路径访问

联系信息

如果在使用过程中遇到问题，或有任何建议和反馈，可以通过以下方式联系：

• 前端川
• 网址：https://www.vsqdc.cn