Vue2 + TypeScript 代码编写规范

1、.vue文件名

全小写英文，多个单词用中横线拼接

最佳方式

scheduling-worker-dialog.vue

scheduling-worker-card.vue

可选方式（大驼峰）

SchedulingWorkerDialog.vue

SchedulingWorkerCard.vue

2、ts文件名

class和interface文件名（大驼峰），并说明什么类型。

功能类型的文件名（小驼峰）

最佳方式

AlarmClass.ts

FormTableInterface.ts

changeLogArray.ts

3、<template>

<>标记和属性使用小写，多个单词用中横线分隔，同.vue文件命名一样

@PropSync的属性命名加Sync后缀;

@Emit方法命名加emit前缀

禁用非特殊情况下加style=""的属性；多半情况只出现在:style需要数据绑定时；

<dialog-group-create
v-if="createVisible"
:visible-sync.sync="createVisible"
:groups="groups"
:type="type"
:style="`top: ${dragTop}px; left: ${dragLeft}px`"
@emit-operation-success="emitOperationSuccess"
></dialog-group-create>

4、文件引入顺序

vue-property-decorator、components、mixins、css样式、vuex-class、第三库的、自定义ts、全局变量(require)

import { Component, Vue } from 'vue-property-decorator';
import CustomTablePagination from '@/components/custom/custom-table-pagination.vue';
import TabBar from '@/views/appres/cloudlist/tab-bar.vue';
import { TablePaginationMixin } from '@/mixins/TablePaginationMixin';
import { EnterKeyupMixin } from '@/mixins/EnterKeyupMixin';
import 'fullcalendar/dist/fullcalendar.css';
import { State } from 'vuex-class';
import VueMarkdown from 'vue-markdown';
import { appresHostMissingCol } from '@/utils/array/tableCol';
import { TableQueryClass } from '@/utils/class/CommonClass';
import { HostMissingDataClass } from '@/utils/class/AppresClass';
import { TenantClass } from '@/utils/class/TenantClass';
const docMD = require('./development.md');
@Component({
components: { CustomTablePagination, TabBar },
mixins: [EnterKeyupMixin]
})

5、export default

@Prop、@PropSync、@State、@Mutation、$refs、data属性、get（get值加get前缀）、@Watch、@Emit、自定义方法、生命周期

相同类型的定义不换行，不同类型使用换行分隔

@Prop({ default: () => new TableColClass() }) tableCol!: TableColClass;
@Prop({ default: 0 }) parentOffsetLeft!: number;
@PropSync('visibleSync', { default: false }) visible!: boolean;
@PropSync('drawerWidthSync', { default: 700 }) drawerWidth!: number;
@State language!: string;
@Mutation setLanguage!: (value: string) => void;
$refs!: { tablePaginationElTable: ElTable }
total = 0;
pageInit = false;
get getIsEdit(): boolean {
return this.schedulingRecord.id > 0;
}
get getTitle(): string {
return this.getIsEdit ? '修改值班信息' : '新增值班信息';
}
@Watch('visible') onVisibleChange(newVal: boolean): void {
if (newVal) {
this.init();
}
}
@Watch('schedulingTable') onSchedulingTableChange(
newVal: SchedulingTableClass
): void {
this.handleSchedulingTableChange(newVal);
}
@Emit() emitOpenSubMenus(): number {
return 0;
}
@Emit() emitThumbTackClick(
item: MenuItemClass | SubMenuClass
): MenuItemClass | SubMenuClass {
return item;
}
public handleItemClick(
menuItem: MenuItemClass,
getMenuItem: MenuItemClass
): void {
let needTurnPage = true;
needTurnPage && this.turnPage(getMenuItem.routeName, getMenuItem.link);
}
handleItemMouseEnter(menuItem: MenuItemClass): void {
menuItem.thumbTackVisible = true;
if (menuItem.rightIconVisibleType === 'hover') {
menuItem.rightIconVisible = true;
}
if (menuItem.subMenus.length > 0) {
this.showSubMenu = true;
}
}
created(): void {
this.getUserDatas('');
}
mounted(): void {
if (this.$refs.col) {
this.selfOffsetLeft = this.$refs.col.offsetLeft;
this.selfOffsetTop = this.$refs.col.offsetTop;
}
}

6、Prop

使用默认值，并使用!:限定类型

@Prop({ default: () => new TableColClass() }) tableCol!: TableColClass;
@Prop({ default: 0 }) parentOffsetLeft!: number;

最后

以上就是动人草丛为你收集整理的Vue2 + TypeScript 代码编写规范的全部内容，希望文章能够帮你解决Vue2 + TypeScript 代码编写规范所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。