Vue3 实战：从 0 到 1 搭建个人博客

1. 项目初始化

npm create vue@latest my-blog
cd my-blog
npm install

2. 安装核心依赖

npm install vue-router@4 pinia @vueuse/core
npm install -D sass

3. 路由配置 (src/router/index.js)

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/HomeView.vue')
  },
  {
    path: '/post/:id',
    name: 'PostDetail',
    component: () => import('@/views/PostDetail.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

4. 状态管理 (src/stores/postStore.js)

import { defineStore } from 'pinia'

export const usePostStore = defineStore('post', {
  state: () => ({
    posts: [
      { id: 1, title: 'Vue3响应式原理', content: '...' },
      { id: 2, title: 'Composition API实践', content: '...' }
    ]
  }),
  getters: {
    getPostById: (state) => (id) => {
      return state.posts.find(post => post.id === parseInt(id))
    }
  }
})

5. 主组件 (src/App.vue)

<template>
  <div class="app-container">
    <header>
      <nav>
        <RouterLink to="/">首页</RouterLink>
        <RouterLink to="/about">关于</RouterLink>
      </nav>
    </header>
    
    <main>
      <RouterView />
    </main>
    
    <footer>
      <p>© 2023 我的个人博客</p>
    </footer>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  
  header {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    
    nav {
      display: flex;
      gap: 20px;
      
      a {
        text-decoration: none;
        color: #2c3e50;
        
        &.router-link-active {
          font-weight: bold;
        }
      }
    }
  }
  
  footer {
    margin-top: 50px;
    text-align: center;
    color: #7f8c8d;
  }
}
</style>

6. 首页组件 (src/views/HomeView.vue)

<script setup>
import { usePostStore } from '@/stores/postStore'

const postStore = usePostStore()
</script>

<template>
  <div class="home-view">
    <h1>最新文章</h1>
    
    <ul class="post-list">
      <li v-for="post in postStore.posts" :key="post.id">
        <RouterLink :to="`/post/${post.id}`">
          {{ post.title }}
        </RouterLink>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.post-list {
  list-style: none;
  padding: 0;
  
  li {
    margin: 15px 0;
    
    a {
      font-size: 1.2rem;
      color: #3498db;
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>

7. 文章详情页 (src/views/PostDetail.vue)

<script setup>
import { useRoute } from 'vue-router'
import { usePostStore } from '@/stores/postStore'

const route = useRoute()
const postStore = usePostStore()
const post = postStore.getPostById(route.params.id)
</script>

<template>
  <article v-if="post" class="post-detail">
    <h1>{{ post.title }}</h1>
    <div class="content">
      {{ post.content }}
    </div>
    <RouterLink to="/">← 返回首页</RouterLink>
  </article>
  
  <div v-else class="not-found">
    <h2>文章不存在</h2>
    <RouterLink to="/">返回首页</RouterLink>
  </div>
</template>

<style scoped lang="scss">
.post-detail {
  .content {
    margin: 30px 0;
    line-height: 1.8;
  }
  
  a {
    color: #3498db;
  }
}

.not-found {
  text-align: center;
  padding: 50px 0;
}
</style>

8. 关于页面 (src/views/AboutView.vue)

<template>
  <div class="about-view">
    <h1>关于我</h1>
    <p>前端开发者，热爱Vue技术栈...</p>
    <p>联系方式：contact@example.com</p>
  </div>
</template>

<style scoped>
.about-view {
  p {
    margin: 15px 0;
    line-height: 1.6;
  }
}
</style>

9. 启动项目

npm run dev

项目结构

src/
├── assets/
├── components/
├── stores/
│   └── postStore.js
├── views/
│   ├── HomeView.vue
│   ├── PostDetail.vue
│   └── AboutView.vue
├── router/
│   └── index.js
├── App.vue
└── main.js

功能扩展建议

1. 添加Markdown支持：使用marked库解析.md文件
2. 实现分类功能：在store中添加分类状态
3. 添加评论系统：集成第三方服务如Gitalk
4. SEO优化：使用vue-meta管理页面元信息
5. 响应式设计：使用媒体查询适配移动端

通过以上步骤，您已实现了一个基础的个人博客系统，包含文章列表、详情展示和关于页面，后续可根据需求继续扩展功能。