尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)

发布时间:2026/9/12 12:08:48

资讯中心
01
ARTICLE

让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)

让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)
适用: Vue3 TypeScript 项目统一目录、文件、变量、函数、Hooks、工具类、组件命名规范兼顾可读性、团队协作。对象命名格式目录名kebab-case组件的目录名PascalCase组件文件名注册名PascalCasehooks文件名kebab-casetools文件名camelCaseStore文件名kebab-case类型定义文件名types/kebab-case.ts单个组件类型定义文件名PascalCase.types.tshooks函数名camelCaseStore函数名camelCaseInterface / Type名PascalCase函数和方法camelCaseclassPascalCase以上是整合了多个高星开源项目整理了各大 AI 的回答整理出来的大概命名规范里边还有很多值得纠结的地方现实中大家的项目一般都是各有各的规范。乱吗说实话这太乱了老铁稍微不注意就用错了那么目录名大小写乱用有影响吗没影响组件小写开头影响导入、影响编译吗不影响全局类型定义使用camelCase有影响吗也没有影响在vue中只要你能写对导入路径那么代码就能正常运行现代的编辑器几乎都能在写导入路径时给到开发者智能提示何不将命名规范简化为对象命名格式目录名camelCase组件的目录名camelCase组件文件名可选导入为PascalCasecamelCasehooks文件名camelCasetools文件名camelCaseStore文件名camelCase类型定义文件名types/camelCase.ts单个组件类型定义文件名camelCase.types.tshooks函数名camelCaseStore函数名camelCase函数和方法camelCaseInterface / Type名PascalCaseclassPascalCase是不是简单多了何必去纠结于命名一套规则通杀不用反复区分浪费生命之所以大量使用camelCase主要还是为了兼容hooks和函数、方法这三样使用camelCase已经是共识了。我使用这套简单粗暴版的规范已经有段时间了没有出现过任何因为命名产生的问题看着也非常舒服特分享给大家。
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。