vue开发规范总结一、组件封装尽量将独立的功能封装为一个组件，组件粒度尽量小，方便其他组件复用；二、组件定义 Vue

一、组件封装

尽量将独立的功能封装为一个组件，组件粒度尽量小，方便其他组件复用；

二、组件定义

Vue 组件使用 TypeScript 进行开发，使用 vue-property-decorator 来定义 class-style 形式的组件，示例代码如下

vue-property-decorator 官方文档：github.com/kaorun343/v…

import {Vue, Component, Prop, Watch} from 'vue-property-decorator'

@Component
export default class ComponentName extends Vue {
    @Prop({type: Number})
    protected propA!: number | undefined

    @Watch('propA')
    propAChange(val: string, oldVal: string):void {
    }
}

同样，为支持 Vuex 的类型定义，在 Vue 组件中使用 vuex-class 进行装饰器的使用，如下：

vuex-class 官方文档：github.com/ktsn/vuex-c…

import {Vue, Component} from 'vue-property-decorator'
import {State, namespace} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export default class ComponentName extends Vue {
    @State(state => state.bar) 
    protected stateBar!: string

    @someModule.State(state => state.foo) 
    protected stateFoo!: number
}

三、组件开发规范

注册组件的时候，全部使用 PascalCase 格式

import PageSleepConfirm from './PageSleepConfirm.vue'

组件文件名、import 引用名称、组件定义的 class 名称尽量保持一致，不能无相关关系
与组件相关的图片放在当前目录的 images 目录下
通用组件放在 components 目录下，业务组件依据就近原则放在父组件目录下
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case
prop 定义应该尽量详细：1.必须申明类型 Type；2.提供默认值或指定 required

Methods 命名规范

驼峰式命名 camelCase
事件响应方法使用「动词+名词+Handle」或「动词+Handle」形式，如 clickImageHandle、logoutHandle
Watch 方法使用「on+变量名+Changed」如 onVisibleChanged
请求数据方法调用 Services 方法的，使用「fetchXXXData」如 fetchUserListData，请求数据方法需要加上 loading 状态变化，推荐加上错误处理
事件响应方法、Watch 方法声明类型为 protected
事件响应方法、Watch 方法、数据请求方法原则上不返回数据

import {Vue, Component, Watch} from 'vue-property-decorator'

@Component
export default class ComponentName extends Vue {
    protected loading = false;

    protected created():void {
        this.fetchUserListData();
    }

    public openDialog():boolean {

    }

    private async fetchUserListData():void {
        this.loading = true;
        try {
            this.list = await service.getUserList()
        } finally {
            this.loading = false;
        }
    }

    protected clickImageHandle():void {
    
    }

    @Watch('visible')
    protected onVisibleChanged(value:boolean):void {

    }
}

注: 尽量使用常用单词开头（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 聚集

vue开发规范总结

一、组件封装

二、组件定义

相关参考

三、组件开发规范

Methods 命名规范