CaiYa_Blog：Vue 3 个人博客原型

CaiYa_Blog/
├── caiya_bg/              # 主项目（Vue 3 + Vite）
│   ├── src/
│   │   ├── components/    # 通用组件
│   │   ├── views/         # 页面
│   │   ├── router/        # 路由
│   │   ├── stores/        # Pinia 状态管理
│   │   ├── assets/        # 静态资源
│   │   └── utils/         # 工具函数
│   ├── public/
│   ├── vite.config.ts
│   ├── package.json
│   └── tsconfig.json
├── BUILD_AND_DEPLOY.md    # 构建与部署文档
├── FAVICON_SETUP.md       # Favicon 配置指南
└── UPLOAD_GUIDE.md        # 上传指南

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        about: resolve(__dirname, 'about.html'),
      },
    },
  },
})

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/post/:slug',
    name: 'Post',
    component: () => import('@/views/Post.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/404.vue'),
  },
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(to, _from, savedPosition) {
    if (savedPosition) return savedPosition
    return { top: 0 }
  },
})

export default router

// utils/markdown.ts
import { marked } from 'marked'
import DOMPurify from 'dompurify'
import hljs from 'highlight.js'

marked.setOptions({
  highlight(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(code, { language: lang }).value
    }
    return code
  },
})

export function renderMarkdown(content: string): string {
  return DOMPurify.sanitize(marked.parse(content) as string)
}

<!-- views/Post.vue -->
<template>
  <article class="post-content" v-html="renderedContent" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { renderMarkdown } from '@/utils/markdown'

const route = useRoute()
const renderedContent = ref('')

onMounted(async () => {
  const slug = route.params.slug as string
  const response = await fetch(`${import.meta.env.BASE_URL}posts/${encodeURIComponent(slug)}.md`)
  const markdown = await response.text()
  renderedContent.value = renderMarkdown(markdown)
})
</script>

// assets/styles/variables.scss
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #333333;
  --text-secondary: #666666;
  --accent: #42b883;
}

html.dark {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #e0e0e0;
  --text-secondary: #aaaaaa;
  --accent: #42b883;
}

// stores/theme.ts
import { defineStore } from 'pinia'

export const useThemeStore = defineStore('theme', {
  state: () => ({
    isDark: localStorage.getItem('theme') === 'dark',
  }),
  actions: {
    toggle() {
      this.isDark = !this.isDark
      document.documentElement.classList.toggle('dark', this.isDark)
      localStorage.setItem('theme', this.isDark ? 'dark' : 'light')
    },
  },
})

## build-all.ps1
cd caiya_bg
npm install
npm run build

npm install -D gh-pages
npx gh-pages -d caiya_bg/dist

// 错误写法 ❌
const state = reactive({ count: 0 })
const { count } = state  // 失去响应式！

// 正确写法 ✅
const count = ref(0)
// 或者用 toRefs
const state = reactive({ count: 0 })
const { count } = toRefs(state)

// vite.config.ts
export default defineConfig({
  base: process.env.VITE_BASE_URL || '/',
})