【前端】1.学习了一段时间的vue,总结一下Vue书写规范

news2025/2/22 1:51:40

学习了一段时间的vue,总结一下Vue书写规范

  • 命名规范
    • 普通变量命名规范
    • 常量命名规范
    • 组件命名规范
    • method 方法命名命名规范
    • views 下的文件命名
    • props 命名规范
  • 结构化规范

学习vue规范

命名规范

在团体开发项目中,为了团队所有成员书写可维护的代码,而不是一次性的代码,让团队当中其他人看你的代码能一目了然,甚至过一段时间时候后你再回来看你自己某个时候写的代码也能看明白,所以命名很重要的。

普通变量命名规范

命名方法 :驼峰命名法
命名规范 :

命名必须是跟需求的内容相关的词,比如说我想申明一个变量,用来表示我的学校,那么我们可以这样定义 constmySchool=“我的学校”;
命名是复数的时候需要加s,比如说我想申明一个数组,表示很多人的名字,那么我们可以这样定义 constnames=newArray();

常量命名规范

命名方法 : 全部大写
命名规范 :

使用大写字母和下划线来组合命名,下划线用以分割单词。

 const MAX_COUNT = 10
 const URL = 'https://www.csdn.net/

组件命名规范

官方文档推荐及使用遵循规则:

PascalCase (单词首字母大写命名)是最通用的声明约定
kebab-case (短横线分隔命名) 是最通用的使用约定
组件名应该始终是多个单词的,根组件 App 除外

有意义的名词、简短、具有可读性,命名遵循 PascalCase 约定
公用组件以 Abcd (公司名缩写简称) 开头,如( AbcdDatePicker,AbcdTable)
页面内部组件以组件模块名简写为开头,Item 为结尾,如( StaffBenchToChargeItem,StaffBenchAppNotArrItem)使用遵循 kebab-case 约定

在页面中使用组件需要前后闭合,并以短线分隔,如( ,),导入及注册组件时,遵循 PascalCase 约定,同时还需要注意:必须符合自定义元素规范: 切勿使用保留字。

method 方法命名命名规范

驼峰式命名,统一使用动词或者动词+名词形式

//bad
go、nextPage、show、open、login
// good
jumpPage、openCarInfoDialog
请求数据方法,以 data 结尾

//bad
takeData、confirmData、getList、postForm
// good
getListData、postFormData
init、refresh 单词除外

尽量使用常用单词开头(set、get、go、can、has、is)
附: 函数方法常用的动词:

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

views 下的文件命名

只有一个文件的情况下不会出现文件夹,而是直接放在 views 目录下面,如 index.vue
尽量是名词,且使用驼峰命名法。

开头的单词就是所属模块名字(workbenchIndex、workbenchList、workbenchEdit)
名字至少两个单词(good: workbenchIndex)(bad:workbench)

props 命名规范

在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用
kebab-case

例外情况
作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。
循环变量可以简写,比如:i,j,k 等。

结构化规范

目录文件夹及子文件规范

以下统一管理处均对应相应模块
以下全局文件文件均以 index.js 导出,并在 main.js 中导入
以下临时文件,在使用后,接口已经有了,发版后清除

src 源码目录

|-- api 接口,统一管理
|-- assets 静态资源,统一管理
|-- components 公用组件,全局文件
|-- filters 过滤器,全局工具
|-- icons 图标,全局资源
|-- datas 模拟数据,临时存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模拟接口,临时存放
|-- router 路由,统一管理
|-- store vuex, 统一管理
|-- views 视图目录
| |-- staffWorkbench 视图模块名
| |-- |-- staffWorkbench.vue 模块入口页面
| |-- |-- indexComponents 模块页面级组件文件夹
| |-- |-- components 模块通用组件文件夹

以上是vue项目中的 文件基本结构,都是这样组成的。规范的命名和基本的文件结构方便我们更好的理代码和维护代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406087.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JS入门到精通完整版

前言 JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、…

【前端灵魂脚本语言JavaScript①】——JS引入方式

🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 JavaScript引入 文章目录JavaScript引入一、JS介绍二…

PTA第六章作业详解

🚀write in front🚀 📝个人主页:认真写博客的夏目浅石. 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝 📣系列专栏:夏目的作业 💬总结:希望你看完之后&am…

vue+uniapp瀑布流布局多种实现方式

文章目录前言一、实现原理二、代码实现1.方式1(图片高度累加比较法)2.方式2(父元素高度比较法)三.uniapp实现代码实现四、多列实现代码实现前言 瀑布流布局是网页设计常见的一种布局,一般用于图片多列展示。列宽固定&…

Vue3:状态管理-Store(Vuex,Pinia)

什么是状态管理 理论上来说,每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了 它是一个独立的单元,由以下几个部分组成 状态:驱动整个应用的数据源;视图:对状态的一种声明式映射;交互&#xff1a…

写给20、21级学生的话

写给20、21级学生的话前言一、关于招聘变招生,你怎么看?二、对于即将实习/已经实习的学生,你有什么建议?1.学习方面2.提升方面三、思想成年真的很重要前言 最近,有一些同学遇到的实习问题,我统一回复下&…

Vue2通知提醒框(Notification)

项目相关依赖版本信息 可自定义设置以下属性: 自动关闭的延时时长(duration),单位ms,默认4500ms消息从顶部弹出时,距离顶部的位置(top),单位像素px,默认24p…

HTML常用快捷键都在这了 看完之后效率暴涨

是这么回事; 我今天上网页课的时候,发现好多同学在敲标签的时候敲得很慢,我再仔细一看,好家伙,他们的标签竟然都是一个一个的敲出来的! 那效率能高吗? 这是当时让敲的代码,很简单,对…

css实现元素居中的5种方法

目录 1.最简单的方法 2.利用定位 3.定位配合css3位移 4.弹性盒模型 5.网格布局Grid 相信大家在面试的时候也会经常碰到css实现元素居中的方法,下面我介绍5中方法给大家,欢迎大家评论区交流 需求: 给定两个元素,这两个元素是…

vue项目设置打包后的静态文件访问路径

vue项目设置打包后的静态文件访问路径 **啰嗦一下:**相同域名下可能会存在两份相关或不相关的代码,需要通过切换文件夹路径进入不同项目时,需要在项目打包输出代码时设置静态文件的访问路径(vue、react都要)。这种方式…

架构之软件负载均衡LVS、Nginx、Haproxy、Keepalived

目前市面上最常见的负载均衡技术方案主要有三种: 基于DNS负载均衡, DNS负载均衡主要适用于的场景是多地集群的方式,也就是可能北京有一个数据中心,在其中部署了一整套的集群提供服务,在上海有一个数据中心&#xff0c…

图片的美白与美化

博主简介 博主是一名大二学生,主攻人工智能研究。感谢让我们在CSDN相遇,博主致力于在这里分享关于人工智能,c,Python,爬虫等方面知识的分享。 如果有需要的小伙伴可以关注博主,博主会继续更新的&#xff0c…

Error: Can‘t find Python executable “python“, you can set the PYTHON env variable.解决办法

😦电脑磕坏了 最近把公司给的mac屏幕给磕坏了,换成自己的macbookpro,本来想用时间机器做个无缝衔接,结果发现不能用了,跟客服沟通被告知macos版本在11以上不支持时间机器系统迁移,只能使用迁移助理做数据备…

HTML实现简单的贪吃蛇小游戏(附完整源码)

基于HTML5技术的贪吃蛇小游戏的设计与实现 项目简介: 贪吃蛇作为我们儿时经典的游戏之一,它是一款单机而又好玩的小游戏。今天,就让我们用html5技术实现一个简单的贪吃蛇小游戏! 项目核心技术: html5的canvasJS技术 …

Typora如何设置字体的颜色

作者:虚坏叔叔 博客:https://xuhss.com 早餐店不会开到晚上,想吃的人早就来了!😄 Typora如何设置字体的颜色 Typora没有直接设置字体颜色的功能,不能像word一样,选中字体直接设置想要的颜色。 …

uniapp使用高德地图

uniapp使用高德地图 1、项目前准备 1.1、首先你需要去申请一个属于自己的高德地图key,怎么申请暂不多说需要的去官网看 1.2、链接: 高德地图申请key直通车,点击前往。 有一个uniapp项目。 2、页面创建引入 新建一个uniapp的空白页 使用web-view 渲染…

Postman下载与安装操作步骤【超详细】

👨‍🎓 博主介绍:大家好,我是超梦梦梦梦,很高兴认识大家~🍗关注➕点赞➕评论➕收藏 😄🙏博主水平有限,如有错误,欢迎各位大佬纠正 Postman下载与安装&#x1…

vue的指令和插值总结

文章目录一、安装vue二、Vue模板案例步骤三、基础模板(记住)四、vue的指令和插值1、{{}}:插值表达式的语法2、v-text:填充纯文本内容(data中的值)3、v-html:填充html(data中的值&…

蓝桥杯刷题第九天

题目描述本题为填空题,只需要算出结果后,在代码中使用输出语句将所填结果输出即可。素数就是不能再进行等分的整数。比如7,11。而 9 不是素数,因为它可以平分为 3 等份。一般认为最小的素数是2,接着是 3,5&…

el-upload 超详细-(附件,图片,多类型文件)玩转上传upload--new FormData()

代码(我的项目代码:注解在下面)代码复制直接用,可以实现所有文件上传,更改接口即可(如需详细注解,学习,下面的详解完全够用,从0到学会这一片加官方文档就够了&#xff09…