Vue3 + Nuxt3 高性能资源下载平台实战

📊 项目背景与需求分析

在数字化时代，高质量的源码资源对于开发者来说至关重要。我们决定构建一个高性能的资源下载平台，解决以下核心问题：

市场需求分析

🛠️ 技术选型与架构设计

技术选型是决定项目成败的关键。我们经过深入调研和对比，最终选择了以下技术栈：

前端技术栈

架构设计

// nuxt.config.ts - 核心配置
export default defineNuxtConfig({
  // 启用 SSR
  ssr: true,
  
  // 模块配置
  modules: [
    '@nuxtjs/color-mode', // 暗黑模式
    '@nuxtjs/tailwindcss' // TailwindCSS
  ],
  
  // 构建优化
  build: {
    analyze: process.env.ANALYZE === 'true'
  },
  
  // 运行时配置
  runtimeConfig: {
    jwtSecret: process.env.JWT_SECRET,
    alipayAppId: process.env.ALIPAY_APP_ID,
    private runtimeConfig: {
      jwtSecret: process.env.JWT_SECRET
    }
  },
  
  // 自动导入
  imports: {
    dirs: ['composables/**']
  }
})

🎯 Vue3 Composition API 深度应用

Vue3 的 Composition API 带来了更灵活的代码组织方式。在本项目中，我们充分利用了 Composition API 的优势。

1. 可复用逻辑封装

将业务逻辑封装成 Composables，实现代码复用和关注点分离。

// composables/useAuth.ts
import { ref, computed } from 'vue'

export const useAuth = () => {
  const user = ref(null)
  const token = ref(null)
  const loading = ref(false)
  
  // 从 localStorage 恢复登录状态
  const initAuth = () => {
    const savedToken = localStorage.getItem('token')
    if (savedToken) {
      token.value = savedToken
      fetchUserInfo()
    }
  }
  
  // 获取用户信息
  const fetchUserInfo = async () => {
    if (!token.value) return
    
    loading.value = true
    try {
      const response = await $fetch('/api/user/info', {
        headers: {
          Authorization: `Bearer ${token.value}`
        }
      })
      user.value = response.user
    } catch (error) {
      console.error('获取用户信息失败:', error)
      logout()
    } finally {
      loading.value = false
    }
  }
  
  // 登录
  const login = async (username: string, password: string) => {
    loading.value = true
    try {
      const response = await $fetch('/api/auth/login', {
        method: 'POST',
        body: { username, password }
      })
      
      token.value = response.token
      user.value = response.user
      
      // 持久化
      localStorage.setItem('token', response.token)
      
      return { success: true }
    } catch (error: any) {
      return { 
        success: false, 
        message: error.data?.message || '登录失败' 
      }
    } finally {
      loading.value = false
    }
  }
  
  // 登出
  const logout = () => {
    user.value = null
    token.value = null
    localStorage.removeItem('token')
    navigateTo('/')
  }
  
  // 计算属性
  const isLoggedIn = computed(() => !!token.value)
  const isAdmin = computed(() => user.value?.role === 'admin')
  
  return {
    user: readonly(user),
    token: readonly(token),
    loading: readonly(loading),
    isLoggedIn,
    isAdmin,
    initAuth,
    login,
    logout
  }
}

2. 响应式数据处理

使用 ref 和 reactive 管理复杂的应用状态。

// composables/useResources.ts
import { ref, computed, watch } from 'vue'

export const useResources = () => {
  // 资源列表
  const resources = ref([])
  const categories = ref([])
  const pagination = ref({
    page: 1,
    pageSize: 12,
    total: 0
  })
  
  // 筛选条件
  const filters = ref({
    category: '',
    keyword: '',
    sortBy: 'created_at',
    order: 'desc'
  })
  
  // 加载状态
  const loading = ref(false)
  
  // 获取资源列表
  const fetchResources = async () => {
    loading.value = true
    try {
      const query = new URLSearchParams({
        page: pagination.value.page.toString(),
        pageSize: pagination.value.pageSize.toString(),
        ...filters.value
      })
      
      const response = await $fetch(`/api/resources?${query}`)
      resources.value = response.resources
      pagination.value.total = response.total
    } catch (error) {
      console.error('获取资源列表失败:', error)
    } finally {
      loading.value = false
    }
  }
  
  // 搜索资源
  const searchResources = (keyword: string) => {
    filters.value.keyword = keyword
    pagination.value.page = 1
    fetchResources()
  }
  
  // 切换分类
  const filterByCategory = (category: string) => {
    filters.value.category = category
    pagination.value.page = 1
    fetchResources()
  }
  
  // 分页变化
  const handlePageChange = (page: number) => {
    pagination.value.page = page
    fetchResources()
  }
  
  // 计算属性：总页数
  const totalPages = computed(() => 
    Math.ceil(pagination.value.total / pagination.value.pageSize)
  )
  
  // 监听筛选条件变化
  watch(filters, () => {
    pagination.value.page = 1
    fetchResources()
  }, { deep: true })
  
  return {
    resources: readonly(resources),
    categories: readonly(categories),
    pagination: readonly(pagination),
    filters: readonly(filters),
    loading: readonly(loading),
    totalPages,
    fetchResources,
    searchResources,
    filterByCategory,
    handlePageChange
  }
}

🚀 Nuxt3 SSR 原理与优化

Nuxt3 的服务端渲染（SSR）能够显著提升首屏加载速度和 SEO 效果。深入理解其工作原理至关重要。

SSR 工作流程

性能优化策略

// 按需加载组件
const LazyModal = defineAsyncComponent(() =>
  import('~/components/Modal.vue')
)

// 服务端预取数据
const { data } = await useAsyncData('resource', () =>
  $fetch(`/api/resources/${route.params.id}`)
)

// nuxt.config.ts
export default defineNuxtConfig({
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: '~/tailwind.config.js'
  }
})

⚡ 性能优化实战

性能优化是提升用户体验的关键。我们从多个维度进行了深入优化。

📝 项目总结

通过本项目，我们成功构建了一个高性能的资源下载平台，实现了以下目标：