背景
一、技术栈选型
核心框架：Vue 3 + TypeScript（推荐组合） 路由管理：Vue Router 4 状态管理：Pinia（替代传统 Vuex，更简洁的类型支持） UI 框架：Naive UI（现代设计语言，支持按需加载） 构建工具：Vite（极速开发体验） 部署方案：Vercel（自带 CDN 加速+自动 HTTPS） 辅助工具： Markdown 解析：marked + highlight.js 代码高亮：shiki（支持 100+语言） 数据分析：VueUse（集成 useMouse 等实用 hook）
二、项目初始化
bash
创建项目
npm create vue@latest my-blog
安装核心依赖
cd my-blog
npm install vue-router@4 pinia naive-ui marked highlight.js shiki @vueuse/core
三、架构设计（关键目录结构）
src/
├── assets/ # 静态资源
│ ├── icons/ # 自定义图标
│ └── styles/ # 全局样式（使用 SCSS）
├── components/ # 公共组件
│ ├── base/ # 基础组件（Button/Input 等）
│ ├── layout/ # 布局组件（Header/Sidebar）
│ └── widgets/ # 功能组件（ArticleCard/TagCloud）
├── views/ # 页面视图
│ ├── HomeView.vue # 首页
│ ├── PostView.vue # 文章详情页
│ └── ToolView.vue # 工具页面
├── router/ # 路由配置
├── stores/ # 状态管理（Pinia）
├── utils/ # 工具函数
│ ├── markdown.ts # Markdown 解析工具
│ └── api.ts # Axios 实例配置
└── main.ts # 入口文件
四、核心功能实现
- 智能路由系统
typescript
// src/router/routes.ts
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'home',
component: () => import('@/views/HomeView.vue'),
meta: { requiresAuth: false }
},
{
path: '/post/:id',
name: 'post',
component: () => import('@/views/PostView.vue'),
props: true
},
{
path: '/tools',
name: 'tools',
component: () => import('@/views/ToolView.vue'),
meta: { requiresAuth: true }
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
// 路由守卫示例
router.beforeEach((to) => {
if (to.meta.requiresAuth && !store.auth.isLoggedIn) {
return '/login'
}
})
- 技术文章解析器
vue
<!-- src/components/MarkdownRenderer.vue -->
<script setup lang="ts">
import { marked } from 'marked'
import hljs from 'highlight.js'
const props = defineProps({
content: {
type: String,
required: true
}
})
// 自定义Markdown渲染
const renderer = new marked.Renderer()
renderer.code = (code, language) => {
const validLang = hljs.getLanguage(language) ? language : 'plaintext'
return `<pre><code class="hljs language-${validLang}">${hljs.highlight(code, {
language: validLang,
ignoreIllegals: true
}).value}</code></pre>`
}
const compiledMarkdown = computed(() => {
return marked(props.content, {
renderer,
gflags: { table: true },
pedantic: false
})
})
</script>
<template>
<article class="markdown-body" v-html="compiledMarkdown" />
</template>
1. 工具系统集成
vue
<!-- src/views/ToolView.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { ToolConfig } from '@/types/tool'
const tools: ToolConfig[] = [
{
name: 'IP 诊断',
component: () => import('@/components/tools/IPDiagnostic.vue'),
icon: 'mdi-network'
},
{
name: '代码压缩',
component: () => import('@/components/tools/CodeMinifier.vue'),
icon: 'mdi-code-tags'
}
]
const activeTool = ref<ToolConfig>()
const handleToolSelect = (tool: ToolConfig) => {
activeTool.value = tool
}
</script>
<template>
<div class="tool-container">
<nav class="tool-nav">
<div
v-for="tool in tools"
:key="tool.name"
class="tool-item"
@click="handleToolSelect(tool)"
>
<component :is="tool.icon" class="tool-icon" />
<span></span>
</div>
</nav>
<main class="tool-main">
<component
:is="activeTool?.component"
v-if="activeTool"
class="active-tool"
/>
</main>
</div>
</template>
## 五、性能优化策略
代码分割：使用 Vite 的动态导入实现按需加载
CDN 加速：将 Naive UI 等静态资源托管至 CDN
缓存策略：
typescript
// vite.config.ts
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
'naive-ui': ['naive-ui'],
'markdown-parser': ['marked', 'highlight.js']
}
}
}
}
})
图片懒加载：使用 vue3-lazyload
## 六、部署流程
构建生产版本：
bash
npm run build
部署至 Vercel：
连接 GitHub 仓库
设置构建命令：npm install && npm run build
配置输出目录：dist
自定义域名配置：
在域名注册商处设置 CNAME 记录指向 Vercel 提供的域名
在 Vercel 项目设置中绑定自定义域名
七、扩展建议
SEO 优化：集成 vue-meta 管理页面元数据
PWA 支持：使用 vite-plugin-pwa 添加离线能力
监控集成：接入 Sentry 进行错误监控
持续集成：配置 GitHub Actions 自动部署
该方案实现了从前端到部署的完整技术链条，开发者可根据实际需求调整具体实现细节。建议采用渐进式开发策略，先完成核心文章系统，再逐步扩展工具模块和性能优化功能。
