v-开头,后面跟小写,基本上单个单词
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V。
只应该拥有单个活跃实例的组件应该以 The 前缀命名,以示其唯一性。
components/
|- TheHeading.vue
|- TheSidebar.vue
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
<!-- 在所有地方 -->
<my-component></my-component>
JS/JSX 中的组件名应该始终是 PascalCase 的,尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时,可以使用 kebab-case 字符串。
Vue.component('MyComponent', {
// ...
})
Vue.component('my-component', {
// ...
})
import MyComponent from './MyComponent.vue'
export default {
name: 'MyComponent',
// ...
}
组件名应该倾向于完整单词而不是缩写。
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。
props: {
greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
禁止使用别名,模板内组件标签名遵循html 标签命名规范,或者使用组件名
使用相同的名字
使用“小驼峰命名法”
使用 全部大写的下划线命名法
使用“小驼峰命名法”
小写
大驼峰
大驼峰
全部大写,使用大写字母和下划线来组合命名,下划线用以分割单词,语义化,布尔值前缀应为is(is+动词)
swapData: '临时交换数据',
tempData: '临时数据',
dataSnapshot: '数据快照'
var thisIsMyName;
var goodID;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
单词复数(options、maps、entities、collections)或者以有列表含义单词单数结尾
不同场景选择不同命名方式
is+动词(现在进行时)/形容词
isShow:是否显示
isVisible:是否可见
isLoading:是否处于加载中
isConnecting:是否处于连接中
isValidating:正在验证中
isRunning:正在运行中
isListening:正在监听中
形容词
disabled:是否禁用
editable:是否可编辑
clearable:是否可清除
readonly:只读
expandable:是否可展开
checked:是否选中
enumberable:是否可枚举
iterable:是否可迭代
clickable:是否可点击
draggable:是否可拖拽
allow、with、enable、no等动词为前缀的小驼峰
//是否带选项卡
withTab
//不带选项卡
withoutTab
//开启过滤
enableFilter
//允许自定义缩放
allownCustomScale
//是否清除
shouldClear
//是否能选中元素
canSelectItem
//不显示label后面的冒号
noColon
//检查Js
checkJs
动词过去式+Event
//分配事件
assignedEvent
//关闭事件
closedEvent
//标签事件
labeledEvent
//锁事件
lockedEvent
//部署事件
deployedEvent
小驼峰式命名法。
前缀应当为动词。
//提交表单
onSubmit
//处理分页页数改变
handleSizeChange
//处理分页每页大小改变
handlePageChange
//按下键
onKeydown
根据curd划分为get|set、fetch|delete、remove|update|add、create前缀
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 聚集
to、go开头
//跳转到模版详情页面
toTplDetail
//导航到首页
navigateToHome
//跳转首页
jumpHome
//跳转首页
goHome
//重定向到登录页
redirectToLogin
//切换Tab选项卡
switchTab
//回到主页
backHome
//根据ID获取数据元素
getItemById
//根据传入的已选列表ID来获取列表全部数据
getItemsBySelected
//根据UID查询用户
queryUserByUid
//格式化日期
formatDate
//转换货币单位
convertCurrency
//反转数据列表
inverseList
//切换所有已选择数据状态
toggleAllSelected
//解析XML数据
parseXml
//展开选择数据
flatSelect
//按降序排序
sortByDesc
oldVal
newVal
采用小驼峰式
scss中的变量、函数、混合、placeholder采用驼峰式命名。
小写,单词之间_隔开,my_project_name
小写开头、驼峰命名
全小写
git 分支分为集成分支、功能分支和修复分支,分别命名为 develop、feature 和 hotfix,均为单数。不可使用 features、future、hotfixes、hotfixs 等错误名称。
feat: 新特性,新功能
fix: 修改问题
docs: 文档修改
style: 代码格式修改, 注意不是 css 修改
refactor: 代码重构
chore: 其他修改, 比如构建流程, 依赖管理
-l 修改内容只影响一个功能模块
-m 修改内容影响两个及以上模块
-g 修改内容会影响所有模块
使用 “动词+名词” 结构,简短文件修改部分的内容。eg. feat -g 新增系列直播
标题: title
摘要: summary
箭头: arrow
商标: label
网站标志: logo
转角/圆角: corner
横幅广告: banner
子菜单: subMenu
搜索:search
搜索框: searchBox
登录: login
登录条:loginbar
工具条: toolbar
下拉: drop
标签页: tab
当前的: current
列表: list
滚动:scroll
服务: service
提示信息: msg
热点:hot
新闻: news
小技巧: tips
下载: download
栏目标题: title
热点: hot
加入: joinus
注册: regsiter
指南: guide
友情链接: friendlink
状态: status
版权: copyright
按钮: btn
合作伙伴: partner
投票: vote 左/右/中:left/right/center
简介:profiles
评论:comment
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
Layout 布局
Container 布局容器
Color 色彩
Typography 字体
Border 边框
Icon 图标
Button 按钮
Link 文字链接
Radio 单选框
Checkbox 多选框
Input 输入框
InputNumber 计数器
Select 选择器
Cascader 级联选择器
Switch 开关
Slider 滑块
TimePicker 时间选择器
DatePicker 日期选择器
DateTimePicker 日期时间选择器
Upload 上传
Rate 评分
ColorPicker 颜色选择器
Transfer 穿梭框
Form 表单
Table 表格
Tag 标签
Progress 进度条
Tree 树形控件
Pagination 分页
Badge 标记
Avatar 头像
Skeleton 骨架屏
Empty 空状态
Descriptions 描述列表
Result 结果
Alert 警告
Loading 加载
Message 消息提示
MessageBox 弹框
Notification 通知
NavMenu 导航菜单
Tabs 标签页
Breadcrumb 面包屑
PageHeader 页头
Dropdown 下拉菜单
Steps 步骤条
Dialog 对话框
Tooltip 文字提示
Popover 弹出框
Popconfirm 气泡确认框
Card 卡片
Carousel 走马灯
Collapse 折叠面板
Timeline 时间线
Divider 分割线
Calendar 日历
Image 图片
Backtop 回到顶部
InfiniteScroll 无限滚动
Drawer 抽屉
//变量
prev//上一页
next//下一页
jumper//跳页元素
pageSize//每页显示条目个数
total//总条目数
pageCount//总页数
pagerCount//页码按钮的数量,当总页数超过该值时会折叠
currentPage//当前页数
prevText//替代图标显示的上一页文字
nextText//替代图标显示的下一页文字
hideOnSinglePage//只有一页时是否隐藏
//数组/集合/对象
pager//页码列表
pageSizes//每页显示个数选择器的选项设置
//函数
handleSizeChange
handleCurrentChange
//事件
size-change
current-change
prev-click
next-click
//变量
showHeader//是否显示表头
highlightCurrentRow//是否要高亮当前行
currentRowKey//当前行的 key,只写属性
emptyText//空数据时显示的文本内容
//数组/集合/对象
tableData//显示的数据
treeProps//渲染嵌套数据的配置选项
defaultSort//默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列,order指定默认排序的顺序
//函数
clearSelection//用于多选表格,清空用户的选择 —
toggleRowSelection//用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) row, selected
toggleAllSelection//用于多选表格,切换所有行的选中状态 -
toggleRowExpansion//用于可展开表格与树形表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开) row, expanded
setCurrentRow//用于单选表格,设定某一行为选中行,如果调用时不加参数,则会取消目前高亮行的选中状态。 row
clearSort//用于清空排序条件,数据会恢复成未排序的状态 —
clearFilter//不传入参数时用于清空所有过滤条件,数据会恢复成未过滤的状态,也可传入由columnKey组成的数组以清除指定列的过滤条件 columnKey
doLayout//对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法 —
sort//手动对 Table 进行排序。参数prop属性指定排序列,order指定排序顺序。 prop: string, order: string
//事件
select//当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row
select-all//当用户手动勾选全选 Checkbox 时触发的事件 selection
selection-change//当选择项发生变化时会触发该事件 selection
cell-mouse-enter//当单元格 hover 进入时会触发该事件 row, column, cell, event
cell-mouse-leave//当单元格 hover 退出时会触发该事件 row, column, cell, event
cell-click//当某个单元格被点击时会触发该事件 row, column, cell, event
cell-dblclick//当某个单元格被双击击时会触发该事件 row, column, cell, event
row-click//当某一行被点击时会触发该事件 row, column, event
row-contextmenu//当某一行被鼠标右键点击时会触发该事件 row, column, event
row-dblclick//当某一行被双击时会触发该事件 row, column, event
header-click//当某一列的表头被点击时会触发该事件 column, event
header-contextmenu//当某一列的表头被鼠标右键点击时触发该事件 column, event
sort-change//当表格的排序条件发生变化的时候会触发该事件 { column, prop, order }
filter-change//当表格的筛选条件发生变化的时候会触发该事件,参数的值是一个对象,对象的 key 是 column 的 columnKey,对应的 value 为用户选择的筛选条件的数组。 filters
current-change//当表格的当前行发生变化的时候会触发该事件,如果要高亮当前行,请打开表格的 highlight-current-row 属性 currentRow, oldCurrentRow
header-dragend//当拖动表头改变了列的宽度的时候会触发该事件 newWidth, oldWidth, column, event
expand-change//当用户对某一行展开或者关闭的时候会触发该事件(展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded) row, (expandedRows | expanded)
//变量
queryString
showWordLimit//是否显示输入字数统计
clearable//是否可清空
prefixIcon//输入框头部图标
suffixIcon//输入框尾部图标
rows//输入框行数
//数组/集合/对象
restaurants
results
//函数
querySearch返回输入建议
querySearchAsync//从服务端搜索数据
createStateFilter
loadAll
handleSelect
handleIconClick
//事件
blur//在 Input 失去焦点时触发 (event: Event)
focus//在 Input 获得焦点时触发 (event: Event)
change//仅在输入框失去焦点或用户按下回车时触发 (value: string | number)
input//在 Input 值改变时触发 (value: string | number)
clear//在点击由 clearable 属性生成的清空按钮时触发
//变量
title
dialogVisible
dialogTableVisible
dialogFormVisible
outerVisible//外层 Dialog
innerVisible//内层 Dialog
centerDialogVisible
formLabelWidth
fullScreen
//数组/集合/对象
gridData
form
//函数
handleClose
//事件
open//Dialog 打开的回调 —
opened//Dialog 打开动画结束时的回调 —
close//Dialog 关闭的回调 —
closed//Dialog 关闭动画结束时的回调 —
//变量
checked
checkAll
isIndeterminate//表示 checkbox 的不确定状态,一般用于实现全选的效果
checkedCount
//数组/集合/对象
checkList
cityOptions
checkedCities
//函数
handleCheckAllChange
handleCheckedCitiesChange
//事件
change//当绑定值变化时触发的事件
//变量
baseURL
oldURL
newURL
hashchangeCalled
state
hashName
//函数
onHashChange
displayHash
changeHash
getLocationHash
waitForHashchange
getHash
//事件
hashChange