Vue组件校验用公共常量对象根目录存放位置咨询

关于models/color.js的合理性 #

这种存放方式不符合绝大多数前端项目的目录约定，models目录通常用来存放业务数据模型、实体类定义（比如接口返回的用户数据结构、业务表单的字段规则等）。你提到的这类颜色、尺寸是纯UI层面的静态常量，不属于业务模型范畴，放models目录会提高后续维护的理解成本，接手的开发者很容易误以为是和业务数据相关的配置。

推荐的存放路径 #

根据项目规模和使用场景，有几种常见的规范方案可选：

• 如果是全项目通用的UI常量，优先存放在src/constants/目录下，可根据类型拆分文件：

  // src/constants/color.js
  export const Color = {
      primary: 'blue',
      danger: 'red',
      warning: 'orange'
  }
  

  尺寸常量同理存为src/constants/size.js，也可以合并为src/constants/ui.js统一管理所有UI相关常量。
• 如果这些常量仅用于你自行封装的公共基础组件，可以放在src/components/base/constants/目录下，和组件代码就近维护；如果同时需要和样式变量联动，也可以放在src/styles/constants/目录下，和SCSS变量、CSS变量配置文件同目录，方便样式规则统一修改。
• 部分团队也会选择放在src/config/目录，但该目录通常优先存放环境配置、接口域名这类项目全局配置，优先级低于constants目录。

内容的提问来源于stack exchange，提问作者Andrea Verrecchia