首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >一个使用 Vue 3 + TypeScript + Vite 构建的现代化个人主页

一个使用 Vue 3 + TypeScript + Vite 构建的现代化个人主页

作者头像
HandsomeYo
发布2025-04-03 18:35:11
发布2025-04-03 18:35:11
2640
举报

Home For Vue

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

Google Chrome 2024-12-23 10.37.04.png
Google Chrome 2024-12-23 10.37.04.png

特性

  • 🚀 使用 Vue 3 + TypeScript + Vite 构建
  • 🎨 支持深色模式
  • 📱 响应式设计,支持移动端
  • ⚡️ 快速加载和页面切换
  • 🔍 SEO 友好
  • 🌐 支持多语言
  • 📝 Markdown 博客支持
  • 📦 组件自动导入
  • 🎯 TypeScript 类型安全
  • 🔧 可配置的主题

技术栈

  • Vue 3
  • TypeScript
  • Vite
  • Vue Router
  • TailwindCSS
  • PostCSS
  • ESLint + Prettier
  • Husky + lint-staged

开发

代码语言:javascript
复制
# 克隆项目
git clone https://github.com/acanyo/home-for-vue.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产构建
pnpm preview

# 代码格式化
pnpm format

# 代码检查
pnpm lint

项目结构

代码语言:javascript
复制
├── 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           # 项目说明

配置

站点配置

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

代码语言:javascript
复制
export const siteConfig = {
  name: "Your Site Name",
  description: "Your site description",
  // ...其他配置
};

主题配置

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

代码语言:javascript
复制
export const themeConfig = {
  colors: {
    primary: "#2196f3",
    // ...其他颜色
  },
  // ...其他主题配置
};

部署

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

代码语言:javascript
复制
# 构建项目
pnpm build

# 部署 dist 目录

许可证

MIT

版权声明

  • 代码版权归作者 Handsome 所有
  • 页脚版权信息不得移除或修改
  • 违反协议的使用行为将被追究法律责任

补充条款

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

  1. 必须保留页脚版权信息和作者署名
  2. 不得修改页脚中的作者信息
  3. 商业使用需获得作者明确授权

演示站:

https://home.mmm.sd/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-12-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Home For Vue
    • 特性
    • 技术栈
    • 开发
    • 项目结构
    • 配置
      • 站点配置
      • 主题配置
    • 部署
    • 许可证
    • 版权声明
      • 补充条款
      • 演示站:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档