web 端开发规范

组件开发规范

组件命名：

• 目录名使用小写字母和中划线，如： sidebar/

• 组件文件统一使用 index.vue ，便于导入

状态管理规范

Store文件命名：

使用小写字母，如： app.ts 、 member.ts

Store定义规范：

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

interface MemberState {
  token: string
  info: MemberInfo | null
}

interface MemberInfo {
  id: number
  nickname: string
  mobile: string
  // ... 其他字段
}

export const useMemberStore = defineStore('member', {
  state: (): MemberState => ({
    token: '',
    info: null
  }),

  getters: {
    isLogin: (state) => !!state.token,
    memberId: (state) => state.info?.id || 0
  },

  actions: {
    setToken(token: string) {
      this.token = token
      // 持久化存储
      localStorage.setItem('token', token)
    },

    async getMemberInfo() {
      try {
        const res = await getMemberInfo()
        this.info = res.data
        return res
      } catch (error) {
        console.error('获取会员信息失败:', error)
        throw error
      }
    },

    logout() {
      this.token = ''
      this.info = null
      localStorage.removeItem('token')
    }
  }
})

API调用规范

API文件组织：

• 按业务模块分类，如： member.ts 、 system.ts

• 统一使用TypeScript接口定义返回类型

API定义示例：

// member.ts
import { ApiResponse } from '@/types/api'
import { MemberInfo } from '@/types/member'

export interface GetMemberInfoResponse extends ApiResponse<MemberInfo> {
  // 可以添加额外的字段
}

样式开发规范

样式文件结构：

• 全局样式： assets/styles/index.scss

• 公共样式： assets/styles/common.scss

• 组件样式：使用scoped SCSS

国际化规范

语言文件组织：

• 中文： lang/zh-cn/

• 英文： lang/en/

• 按模块分类文件

工具函数规范

工具函数分类：

• common.ts - 通用工具函数

• request.ts - 网络请求封装

• storage.ts - 本地存储封装

• language.ts - 语言相关工具

性能优化规范

组件优化：

• 使用 v-show 和 v-if 合理控制渲染

• 列表渲染使用 key 属性

• 合理使用 computed 和 watch 图片优化：

• 使用懒加载

• 压缩图片大小

• 使用CDN加速

代码分割：

• 路由懒加载

• 组件异步加载