vue实现个人博客
使用 Vue 实现个人博客的步骤
项目初始化
通过 Vue CLI 或 Vite 创建一个新的 Vue 项目。Vue 3 推荐使用 Vite，运行以下命令：
npm create vite@latest my-blog --template vue
cd my-blog
npm install安装必要的依赖，如路由管理和状态管理：
npm install vue-router pinia路由配置
在 src/router/index.js 中配置路由，定义博客的首页、文章详情页等路由：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Post from '../views/Post.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/post/:id', component: Post }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router博客文章管理
使用 Pinia 管理博客文章的状态。创建 src/stores/postStore.js：
import { defineStore } from 'pinia'
export const usePostStore = defineStore('post', {
state: () => ({
posts: [
{ id: 1, title: 'Vue 入门', content: 'Vue 是一个渐进式框架...' },
{ id: 2, title: 'Pinia 使用', content: 'Pinia 是 Vue 的状态管理工具...' }
]
}),
getters: {
getPostById: (state) => (id) => state.posts.find(post => post.id === id)
}
})文章列表展示
在 Home.vue 中展示文章列表：
<template>
<div v-for="post in postStore.posts" :key="post.id">
<router-link :to="'/post/' + post.id">{{ post.title }}</router-link>
</div>
</template>
<script setup>
import { usePostStore } from '@/stores/postStore'
const postStore = usePostStore()
</script>文章详情页
在 Post.vue 中根据路由参数显示文章内容：
<template>
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { usePostStore } from '@/stores/postStore'
const route = useRoute()
const postStore = usePostStore()
const post = postStore.getPostById(Number(route.params.id))
</script>样式设计
可以使用 CSS 预处理器如 SCSS 或直接使用 Tailwind CSS 来美化博客界面。安装 Tailwind CSS：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init配置 tailwind.config.js：
module.exports = {
content: ['./index.html', './src//*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}在 src/assets 目录下添加全局样式文件，并在 main.js 中引入。
部署上线
项目开发完成后，构建生产环境代码：
npm run build生成的 dist 文件夹可以部署到任何静态网站托管服务，如 Vercel、Netlify 或 GitHub Pages。
