vue 实现blog
Vue 实现博客系统
项目初始化
使用 Vue CLI 创建项目，确保已安装 Node.js 和 npm/yarn。
运行命令初始化项目：
vue create vue-blog
cd vue-blog
npm install vue-router axios路由配置
在 src/router/index.js 中配置路由：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import PostList from '../views/PostList.vue'
import PostDetail from '../views/PostDetail.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/posts', component: PostList },
{ path: '/posts/:id', component: PostDetail }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router博客文章组件
创建 PostList.vue 显示文章列表：
<template>
<div>
<h2>文章列表</h2>
<ul>
<li v-for="post in posts" :key="post.id">
<router-link :to="`/posts/${post.id}`">{{ post.title }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
posts: [
{ id: 1, title: 'Vue入门', content: 'Vue基础内容...' },
{ id: 2, title: 'Vue路由', content: '路由配置方法...' }
]
}
}
}
</script>文章详情组件
创建 PostDetail.vue 显示单篇文章：
<template>
<div>
<h2>{{ post.title }}</h2>
<p>{{ post.content }}</p>
<router-link to="/posts">返回列表</router-link>
</div>
</template>
<script>
export default {
data() {
return {
post: {}
}
},
created() {
const postId = this.$route.params.id
// 实际项目中应从API获取数据
this.post = {
id: postId,
title: `文章${postId}`,
content: `这是文章${postId}的内容...`
}
}
}
</script>状态管理（可选）
对于复杂博客系统，可使用 Vuex 管理状态：
npm install vuex创建 src/store/index.js：
import { createStore } from 'vuex'
export default createStore({
state: {
posts: [
{ id: 1, title: 'Vue入门', content: 'Vue基础内容...' },
{ id: 2, title: 'Vue路由', content: '路由配置方法...' }
]
},
getters: {
getPostById: (state) => (id) => {
return state.posts.find(post => post.id === Number(id))
}
}
})样式与布局
使用 CSS 或 UI 框架（如 Element Plus）美化界面：
npm install element-plus在 main.js 中引入：
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(router).use(store).use(ElementPlus).mount('#app')部署上线
构建生产环境代码并部署：
npm run build将生成的 dist 文件夹内容上传至服务器或静态托管服务（如 Netlify、Vercel）。
