Vue3 + Shadcn-Vue 搭建个人博客指南

1. 为什么选择 Vue3 和 Shadcn-Vue？

Vue3： 提供了 Composition API，让状态管理和逻辑复用变得更灵活。其性能优化和更小的包体积使其成为构建现代单页应用的理想选择。

Shadcn-Vue： 它不是一个传统的组件库，而是一个可复用的组件集合。您可以直接将所需的组件代码复制到您的项目中，完全掌控样式和功能，方便自定义和主题化。

2. 搭建步骤

1. 创建项目： 使用 Vite 创建一个 Vue3 项目。

npm create vite@latest my-blog -- --template vue-ts

2. 配置 Tailwind CSS 和 Shadcn-Vue： 遵循官方文档，安装并配置 Tailwind CSS，然后初始化 Shadcn-Vue。
3. 设计页面： 利用 Shadcn-Vue 提供的组件，如 Card、Button、Input 等，快速搭建博客的页面布局，包括文章列表、详情页、导航栏等。

3. 博客内容管理

对于个人博客，您可以选择多种内容管理方式：

• 静态数据： 直接在代码中定义文章数据，适合小型、更新频率不高的博客。
• Markdown 文件： 将文章内容以 Markdown 文件形式存储，通过库如 vite-plugin-md 在构建时进行解析。
• 后端接口： 搭建一个 Java 后端服务，通过 API 接口获取文章数据，实现动态内容管理。

结合您的 Java 技术栈，推荐使用第三种方式，可以更好地展示您的全栈开发能力。