Vue3+Vite+Markdown：零搭建博客系统

从零开始搭建个人博客系统：Vue3 + Vite + Markdown实时预览功能实现

随着前端技术的不断发展，构建个人博客系统已成为展示技术能力和分享知识的重要方式。本文将详细介绍如何使用Vue3、Vite以及Markdown技术栈，从零开始搭建一个具有实时预览功能的个人博客系统。通过这个项目，开发者可以掌握现代前端开发的核心技术，同时获得一个功能完善的博客平台。

技术栈选择与项目初始化

技术选型依据

Vue3作为当前主流的前端框架，其Composition API提供了更好的代码组织和逻辑复用能力。Vite作为下一代前端构建工具，凭借其极快的冷启动和热更新速度，显著提升了开发体验。Markdown作为轻量级标记语言，非常适合博客内容的编写，而实时预览功能则能提供所见即所得的编辑体验。

项目初始化步骤

首先需要创建一个新的Vue3项目。通过npm或yarn执行以下命令：

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

进入项目目录后，安装必要的依赖包：

• markdown-it：用于解析Markdown内容
• highlight.js：提供代码高亮功能
• vue-router：实现路由管理
• axios：用于后续可能的API请求

执行安装命令：

npm install markdown-it highlight.js vue-router

Markdown实时预览功能实现

核心组件设计

实现Markdown实时预览功能需要设计三个主要组件：编辑器组件、预览组件和布局组件。编辑器组件负责接收用户输入，预览组件负责渲染Markdown内容，布局组件则负责将两者进行合理排布。

编辑器组件实现

编辑器组件可以使用textarea或更高级的代码编辑器如CodeMirror。这里以textarea为例：

<template>
  <textarea 
    v-model=\"markdownContent\" 
    @input=\"updatePreview\"
    placeholder=\"在此输入Markdown内容...\"
  ></textarea>
</template>

<script setup>
import { ref } from \'vue\'

const markdownContent = ref(\'\')
const emit = defineEmits([\'update\'])

const updatePreview = () => {
  emit(\'update\', markdownContent.value)
}
</script>

预览组件实现

预览组件需要使用markdown-it库将Markdown内容转换为HTML：

<template>
  <div class=\"markdown-preview\" v-html=\"htmlContent\"></div>
</template>

<script setup>
import { ref, watch } from \'vue\'
import MarkdownIt from \'markdown-it\'
import hljs from \'highlight.js\'

const props = defineProps({
  content: String
})

const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value
      } catch (__) {}
    }
    return hljs.highlightAuto(str).value
  }
})

const htmlContent = ref(\'\')

watch(() => props.content, (newContent) => {
  htmlContent.value = md.render(newContent || \'\')
})
</script>

布局组件整合

布局组件负责将编辑器和预览组件进行合理排布，可以采用左右分栏或上下分布的方式：

<template>
  <div class=\"editor-container\">
    <div class=\"editor-pane\">
      <Editor 
        :content=\"markdownContent\" 
        @update=\"markdownContent = $event\"
      />
    &div>
    <div class=\"preview-pane\">
      <Preview :content=\"markdownContent\" />
    </div>
  </div>
</template>

<script setup>
import { ref } from \'vue\'
import Editor from \'./Editor.vue\'
import Preview from \'./Preview.vue\'

const markdownContent = ref(\'\')
</script>

路由与页面管理

路由配置

使用vue-router可以轻松实现多页面管理。首先创建路由配置文件：

import { createRouter, createWebHistory } from \'vue-router\'
import EditorPage from \'../pages/EditorPage.vue\'
import BlogList from \'../pages/BlogList.vue\'

const routes = [
  { path: \'/\', component: BlogList },
  { path: \'/editor\', component: EditorPage }
]

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

export default router

页面组件实现

BlogList页面可以展示已发布的博客列表，EditorPage则包含我们之前实现的实时预览功能。可以通过localStorage或后端API来持久化博客数据。

数据持久化方案

前端存储实现

对于简单的博客系统，可以使用localStorage进行数据存储：

const saveBlog = (content) => {
  const blogs = JSON.parse(localStorage.getItem(\'blogs\') || \'[]\')
  const newBlog = {
    id: Date.now(),
    content,
    createdAt: new Date().toISOString()
  }
  blogs.push(newBlog)
  localStorage.setItem(\'blogs\', JSON.stringify(blogs))
}

const loadBlogs = () => {
  return JSON.parse(localStorage.getItem(\'blogs\') || \'[]\')
}

导出与分享功能

实现博客导出功能，允许用户将Markdown内容导出为文件：

const exportMarkdown = (content) => {
  const blob = new Blob([content], { type: \'text/markdown\' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement(\'a\')
  a.href = url
  a.download = \'blog.md\'
  a.click()
  URL.revokeObjectURL(url)
}

总结与扩展建议

通过以上步骤，我们已经成功搭建了一个基于Vue3 + Vite + Markdown的个人博客系统，实现了实时预览功能。这个项目不仅涵盖了现代前端开发的核心技术，还提供了完整的博客编辑、预览和存储解决方案。

对于后续扩展，可以考虑以下方向：

• 添加Markdown语法工具栏，方便用户插入常用格式
• 实现图片上传和插入功能
• 添加主题切换功能，支持多种视觉风格
• 集成评论系统，增强互动性
• 添加搜索功能，便于内容检索
• 部署到云服务，实现公网访问

这个项目展示了如何将现代前端技术栈有机结合，构建一个功能完善的个人博客系统。通过实践，开发者可以深入理解Vue3的组合式API、Vite的构建原理以及Markdown解析技术，为更复杂的前端项目打下坚实基础。