当前位置：首页 > VUE

vue 实现blog

2026-01-07 08:09:57VUE

Vue 实现博客的基本步骤

使用 Vue 实现博客可以分为前端和后端两部分，前端使用 Vue.js 框架，后端可以选择 Node.js、Python 或其他服务端语言。以下是一个基于 Vue 的博客实现方案。

前端实现

项目初始化 使用 Vue CLI 或 Vite 初始化项目：

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

安装必要依赖 安装路由、状态管理和 UI 库：

npm install vue-router pinia element-plus

路由配置 在 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

状态管理 使用 Pinia 管理博客文章状态：

// src/stores/postStore.js
import { defineStore } from 'pinia'

export const usePostStore = defineStore('post', {
  state: () => ({
    posts: []
  }),
  actions: {
    async fetchPosts() {
      const response = await fetch('/api/posts')
      this.posts = await response.json()
    }
  }
})

页面组件 创建博客列表和详情页组件：

<!-- src/views/PostList.vue -->
<template>
  <div>
    <h1>博客文章</h1>
    <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 setup>
import { usePostStore } from '@/stores/postStore'
import { storeToRefs } from 'pinia'

const postStore = usePostStore()
const { posts } = storeToRefs(postStore)
postStore.fetchPosts()
</script>

后端实现

简单 API 服务 使用 Express 创建后端服务：

npm install express body-parser

创建 server.js：

const express = require('express')
const app = express()
const bodyParser = require('body-parser')

app.use(bodyParser.json())

let posts = [
  { id: 1, title: '第一篇博客', content: '这是第一篇博客的内容' },
  { id: 2, title: '第二篇博客', content: '这是第二篇博客的内容' }
]

app.get('/api/posts', (req, res) => {
  res.json(posts)
})

app.get('/api/posts/:id', (req, res) => {
  const post = posts.find(p => p.id === parseInt(req.params.id))
  res.json(post)
})

app.listen(3000, () => {
  console.log('Server running on port 3000')
})

前后端连接

配置代理 在 vite.config.js 中配置代理：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
})

部署准备

构建前端

npm run build

部署后端 将构建后的前端文件放入后端静态文件夹：

app.use(express.static('dist'))

扩展功能

添加 Markdown 支持 安装 marked 库：

npm install marked

在组件中使用：

import { marked } from 'marked'
const htmlContent = marked(post.content)

添加评论功能 创建评论组件和 API 接口：

// 后端添加评论路由
app.post('/api/posts/:id/comments', (req, res) => {
  const post = posts.find(p => p.id === parseInt(req.params.id))
  post.comments = post.comments || []
  post.comments.push(req.body)
  res.status(201).json(post)
})