最佳实践

本章节总结了在使用Zap Admin Vue3开发过程中的最佳实践和注意事项。

代码规范

命名规范

  • 组件名使用PascalCase：UserProfile.vue
  • 组件实例使用camelCase：userProfile
  • 文件名使用kebab-case：user-profile.js
  • 常量使用大写下划线：MAX_COUNT
  • 事件名使用kebab-case：@user-login

目录结构

src/
├── api/              # API接口
├── assets/           # 静态资源
├── components/       # 组件
├── composables/      # 组合式函数
├── config/           # 配置文件
├── directives/       # 自定义指令
├── hooks/            # 钩子函数
├── layouts/          # 布局组件
├── router/           # 路由配置
├── stores/           # 状态管理
├── styles/           # 样式文件
├── utils/            # 工具函数
└── views/            # 页面组件

性能优化

代码分割

// 路由懒加载
const routes = [
  {
    path: '/user',
    component: () => import('@/views/user/index.vue')
  }
]

// 组件懒加载
const MyComponent = defineAsyncComponent(() =>
  import('@/components/MyComponent.vue')
)

缓存优化

// 使用keep-alive缓存组件
<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cachedViews">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

// 使用useMemo缓存计算结果
const cachedValue = useMemo(() => {
  return expensiveOperation()
}, [dependency])

虚拟列表

// 使用虚拟列表处理大数据
import { useVirtualList } from '@vueuse/core'

const { list, containerProps, wrapperProps } = useVirtualList(
  sourceData,
  {
    itemHeight: 50,
    overscan: 5
  }
)

开发建议

组件设计

  • 保持组件的单一职责
  • 使用组合式API代替选项式API
  • 提取可复用的逻辑到composables
  • 使用TypeScript增加代码可维护性
  • 合理使用props和emit进行组件通信

状态管理

  • 按模块拆分store
  • 使用getters处理派生状态
  • 在actions中处理异步逻辑
  • 谨慎使用全局状态

错误处理

// 全局错误处理
app.config.errorHandler = (err, vm, info) => {
  console.error('全局错误:', err)
  // 错误上报
  errorTracker.report(err)
}

// API错误处理
const handleRequest = async () => {
  try {
    await api.getData()
  } catch (error) {
    if (error.response) {
      // 处理HTTP错误
      handleHttpError(error)
    } else if (error.request) {
      // 处理网络错误
      handleNetworkError(error)
    } else {
      // 处理其他错误
      handleOtherError(error)
    }
  }
}

安全考虑

XSS防护

// 使用v-html时注意转义
import { escapeHtml } from '@/utils/security'

const content = escapeHtml(rawHtml)

// 避免直接使用innerHTML
const setContent = (el, content) => {
  el.textContent = content
}

CSRF防护

// 在请求中添加CSRF token
import axios from 'axios'

axios.interceptors.request.use(config => {
  const token = document.querySelector('meta[name="csrf-token"]').content
  config.headers['X-CSRF-TOKEN'] = token
  return config
})

敏感信息处理

  • 避免在前端存储敏感信息
  • 使用HTTPS传输数据
  • 及时清理localStorage和sessionStorage
  • 使用环境变量存储配置信息

常见问题

性能问题

  • 大量数据渲染卡顿
    • 使用虚拟列表
    • 分页加载
    • 延迟加载
  • 首屏加载慢
    • 路由懒加载
    • 组件按需加载
    • 资源压缩
  • 内存泄漏
    • 及时清理事件监听
    • 清理定时器
    • 解除引用关系

兼容性问题

  • 浏览器兼容
    • 使用babel转译
    • 添加polyfill
    • 使用autoprefixer
  • 移动端适配
    • 响应式设计
    • 使用rem或vw单位
    • 触摸事件处理

开发工具

推荐工具

  • VS Code + Volar
  • Vue DevTools
  • Chrome DevTools
  • Postman/Apifox

VS Code插件

  • Vue Language Features (Volar)
  • TypeScript Vue Plugin (Volar)
  • ESLint
  • Prettier
  • GitLens

开发环境配置

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "volar.takeOverMode.enabled": true,
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  }
}

这是文档的最后一页。如果你还有任何问题，欢迎查看我们的 GitHub Issues 或 Discord社区 。