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

原文转自 https://www.lik.cc/archives/homeforvue

Home For Vue

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

特性

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

技术栈

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

开发

# 克隆项目
git clone https://github.com/acanyo/home-for-vue.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产构建
pnpm preview

# 代码格式化
pnpm format

# 代码检查
pnpm lint

项目结构

├── 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           # 项目说明

0
文章导航
  • 上一篇 家用宽带(动态公网ipv4)+CDN 绕开80和443端口
  • 下一篇 「开源」奶狗珠宝证书管理插件 for WordPress