用vue3写一个好看的wiki前端页面

以下是一个使用 Vue 3 + Element Plus 实现的 Wiki 风格前端页面示例，包含现代设计、响应式布局和常用功能：

<template><div class="wiki-container"><!-- 头部导航 --><el-header class="wiki-header"><div class="header-content"><div class="logo-area"><el-icon :size="30" color="#409EFF"><Document /></el-icon><h1 class="title">TechWiki</h1></div><el-inputv-model="searchQuery"placeholder="搜索文档..."class="search-input"@keyup.enter="performSearch"><template #prefix><el-icon><Search /></el-icon></template></el-input><div class="user-area"><el-avatar :size="36" src="https://avatars.githubusercontent.com/u/12345678" /></div></div></el-header><!-- 主体布局 --><el-container class="main-container"><!-- 侧边栏目录 --><el-aside width="260px" class="wiki-sidebar"><el-scrollbar><el-menudefault-active="1"class="wiki-menu"@select="handleMenuSelect"><el-sub-menu index="1"><template #title><el-icon><Folder /></el-icon><span>开发文档</span></template><el-menu-item index="1-1">快速开始</el-menu-item><el-menu-item index="1-2">API 参考</el-menu-item><el-menu-item index="1-3">部署指南</el-menu-item></el-sub-menu><el-sub-menu index="2"><template #title><el-icon><DataAnalysis /></el-icon><span>数据分析</span></template><el-menu-item index="2-1">数据规范</el-menu-item><el-menu-item index="2-2">可视化指南</el-menu-item></el-sub-menu></el-menu></el-scrollbar></el-aside><!-- 主要内容区域 --><el-main class="wiki-content"><el-page-header :icon="null" class="content-header"><template #content><div class="page-title">{{ currentDoc.title }}<el-tag type="warning" v-if="currentDoc.status === 'draft'">草稿</el-tag></div></template></el-page-header><div class="markdown-content" v-html="compiledMarkdown"></div></el-main></el-container></div>
</template><script setup>
import { ref, reactive, computed } from 'vue'
import { marked } from 'marked'
import DOMPurify from 'dompurify'
import hljs from 'highlight.js'// Markdown 配置
marked.setOptions({highlight: function(code, lang) {return hljs.highlightAuto(code).value}
})// 数据
const searchQuery = ref('')
const currentDoc = reactive({title: '欢迎使用 TechWiki',content: `
# 欢迎来到 TechWiki## 快速开始
\`\`\`javascript
// 示例代码
const demo = () => {console.log('Hello TechWiki!')
}
\`\`\`## 功能特性
- 📚 完善的文档管理
- 🔍 强大的搜索功能
- 📝 Markdown 支持
- 🎨 代码高亮显示`,status: 'published'
})// Markdown 编译
const compiledMarkdown = computed(() => {return DOMPurify.sanitize(marked.parse(currentDoc.value.content))
})// 搜索功能
const performSearch = () => {console.log('执行搜索:', searchQuery.value)// 这里可以添加搜索逻辑
}// 菜单选择
const handleMenuSelect = (index) => {console.log('选择菜单:', index)// 这里可以加载对应文档内容
}
</script><style scoped lang="scss">
.wiki-container {height: 100vh;display: flex;flex-direction: column;.wiki-header {background: #2c3e50;color: white;border-bottom: 1px solid rgba(255,255,255,0.1);.header-content {display: flex;align-items: center;height: 100%;max-width: 1400px;margin: 0 auto;padding: 0 20px;.logo-area {display: flex;align-items: center;gap: 12px;.title {margin: 0;font-size: 1.5rem;font-weight: 500;}}.search-input {flex: 1;margin: 0 40px;max-width: 500px;}.user-area {margin-left: auto;}}}.main-container {flex: 1;max-width: 1400px;margin: 0 auto;width: 100%;.wiki-sidebar {background: #f8f9fa;border-right: 1px solid #e9ecef;.wiki-menu {border-right: none;padding: 10px 0;}}.wiki-content {padding: 30px 40px;background: white;.content-header {margin-bottom: 30px;.page-title {font-size: 1.8rem;font-weight: 600;display: flex;align-items: center;gap: 12px;}}.markdown-content {line-height: 1.6;font-size: 16px;:deep(h1) {font-size: 2em;margin: 1.2em 0 0.6em;border-bottom: 1px solid #eee;}:deep(pre) {background: #f8f9fa;padding: 15px;border-radius: 6px;margin: 1em 0;}:deep(code) {font-family: 'Fira Code', monospace;}}}}
}
</style>

主要特性说明：

1.布局结构：

使用 Element Plus 的容器组件实现经典的三栏布局

响应式设计，自动适应不同屏幕尺寸

固定头部 + 滚动内容区域

2.功能模块：

顶部搜索栏（支持回车搜索）

侧边栏多级目录导航

Markdown 内容渲染

代码语法高亮

用户头像展示

3.样式设计：

现代深色系头部导航

浅色侧边栏与内容区域对比

舒适的阅读排版

代码块美化样式

柔和的阴影和边框分隔

4.技术栈：

Vue 3 Composition API

Element Plus 组件库

Markdown 解析（marked + DOMPurify）

代码高亮（highlight.js）

需要安装的依赖：

npm install element-plus @element-plus/icons-vue marked dompurify highlight.js

使用建议：

1.在 main.js 中引入 Element Plus：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'highlight.js/styles/github.css'createApp(App).use(ElementPlus).mount('#app')

2.添加字体优化（在 index.html 头部）：

<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">

3.扩展功能建议：

添加目录锚点导航

实现文档版本历史

增加评论功能

添加暗黑模式切换

集成实时协作编辑

这个示例实现了一个现代化的 Wiki 页面基础框架，你可以根据实际需求调整颜色方案、添加更多交互功能或集成后端 API。