Home For Vue {#home-for-vue}

一个使用 Vue 3 + TypeScript + Vite 构建的现代化个人主页，具有博客文章展示、项目展示、联系表单等功能。

特性 {#%E7%89%B9%E6%80%A7}

• 🚀 使用 Vue 3 + TypeScript + Vite 构建

• 🎨 支持深色模式

• 📱 响应式设计，支持移动端

• ⚡️ 快速加载和页面切换

• 🔍 SEO 友好

• 🌐 支持多语言

• 📝 Markdown 博客支持

• 📦 组件自动导入

• 🎯 TypeScript 类型安全

• 🔧 可配置的主题

技术栈 {#%E6%8A%80%E6%9C%AF%E6%A0%88}

• Vue 3

• TypeScript

• Vite

• Vue Router

• TailwindCSS

• PostCSS

• ESLint + Prettier

• Husky + lint-staged

开发 {#%E5%BC%80%E5%8F%91}

# 克隆项目
git clone https://github.com/acanyo/home-for-vue.git
安装依赖
pnpm install
启动开发服务器
pnpm dev
构建生产版本
pnpm build
预览生产构建
pnpm preview
代码格式化
pnpm format
代码检查
pnpm lint

项目结构 {#%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84}

├── public/              # 静态资源
├── src/
│   ├── assets/         # 项目资源
│   ├── components/     # 组件
│   ├── config/         # 配置文件
│   ├── layouts/        # 布局组件
│   ├── pages/          # 页面
│   ├── router/         # 路由配置
│   ├── styles/         # 样式文件
│   ├── types/          # TypeScript 类型
│   ├── utils/          # 工具函数
│   ├── App.vue         # 根组件
│   └── main.ts         # 入口文件
├── .env                # 环境变量
├── index.html          # HTML 模板
├── package.json        # 项目配置
├── tsconfig.json       # TypeScript 配置
├── vite.config.ts      # Vite 配置
└── README.md           # 项目说明

配置 {#%E9%85%8D%E7%BD%AE}

站点配置 {#%E7%AB%99%E7%82%B9%E9%85%8D%E7%BD%AE}

在 src/config/site.ts 中配置站点基本信息：

export const siteConfig = {
  name: "Your Site Name",
  description: "Your site description",
  // ...其他配置
};

主题配置 {#%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE}

在 src/config/theme.ts 中配置主题相关选项：

export const themeConfig = {
  colors: {
    primary: "#2196f3",
    // ...其他颜色
  },
  // ...其他主题配置
};

部署 {#%E9%83%A8%E7%BD%B2}

项目可以部署到任何静态网站托管服务：

# 构建项目
pnpm build
`部署 dist 目录`

许可证 {#%E8%AE%B8%E5%8F%AF%E8%AF%81}

++MIT++

版权声明 {#%E7%89%88%E6%9D%83%E5%A3%B0%E6%98%8E}

• 代码版权归作者 ++Handsome++ 所有

• 页脚版权信息不得移除或修改

• 违反协议的使用行为将被追究法律责任

补充条款 {#%E8%A1%A5%E5%85%85%E6%9D%A1%E6%AC%BE}

在遵循 MIT 许可证的基础上，还需遵守以下条款：

1. 必须保留页脚版权信息和作者署名

2. 不得修改页脚中的作者信息

3. 商业使用需获得作者明确授权

作者 {#%E4%BD%9C%E8%80%85}

++Handsome++

贡献 {#%E8%B4%A1%E7%8C%AE}

欢迎提交 Issue 和 Pull Request！

推荐服务商 {#%E6%8E%A8%E8%8D%90%E6%9C%8D%E5%8A%A1%E5%95%86}

++Rainyun++提供 CDN 加速 / 云存储服务

演示站： {#%E6%BC%94%E7%A4%BA%E7%AB%99%EF%BC%9A}

https://home.mmm.sd/

下载地址: https://github.com/acanyo/home-for-vue