引言
如果开发团队就一个人的话,那么自己写的代码就是规范,随着公司业务的扩展,团队不断壮大,这时候就要开始考虑协作和编码规范问题了。
一个人走的更快,一群人可以走的更远,前提是统一的策略,还要不断地优化。
0.语义化
组件名、变量名、常量名等等语义化,便于协作,提高效率
组件:
- 文件夹名:大写驼峰 TestList
- 文件名:大写驼峰TestList.vue
变量、常量名
语义化
变量:小写驼峰
let infoList = ' '
常量:大写
const MAX_NUMBER = 10
1.单文件组件引用
<template>
<!-- 组件内没有内容 -->
<test-component/>
<!-- 组件标签之间有内容 -->
<container-component>This is content~</container-component>
</template>
<script>
// 使用驼峰命令
import TestComponent from './components/TestComponent.vue'
</script>
2. 单文件属性声明顺序
<script lang="ts" setup name="componentName">
onBeforeMount(() => {
console.log('onBeforeMount')
})
onMounted(() => {
console.log('onMounted')
})
onBeforeUpdate(() => {
console.log('onBeforeUpdate')
})
onUpdated(() => {
console.log('onUpdated')
})
onBeforeUnmount(() => {
console.log('onBeforeUnmount')
})
onUnmounted(() => {
console.log('onUnmounted')
})
</script>
3.自定义事件
- 自定义事件名建议用 on-动词名
- 事件处理函数建议用 handle+动词名
// 例子:
this.$emit('on-change')
<my-component @on-change='handleChange'/>
4.变量
let test = 10
5.常量
const MAX_TEST = 10
6.引号混用
- html建议用双引号 " "
- js建议用单引号 ’ ’
let str = 'jack'
<test-component data-attributes="test" />
7.多个属性时采用
<li
:span="4"
style="margin-bottom: 10px"
v-for="(item, index) in testList"
:key="index"
>
{
{item.name}}
</li>
8.组件样式声明尽可能设置作用域
由于组件化开发很容易样式命名冲突
<style scoped lang="less">
.test-list {
//...
}
.test-list .test-item{
//...
}
</style>
9.注释
<!-- 序号 -->
<el-table-column prop="id" label="序号" />
<!-- 名称 -->
<el-table-column prop="name" label="名称" />
// 删除
const delete = (row: string) => {
//...
}
// 增加
const add = (row: string) => {
//...
}
10.样式穿透
:deep(.el-card__body) {
//...
}
11.冗余代码
提交代码前移除页面中的 console.log debugger
12 接口类型
以大写 I 为前缀
export interface IState {
roleList: Object;
restartVisible: boolean;
sid: string;
dialogVisible: boolean;
loading: boolean;
list: IDevmemt[];
total: number;
listQuery: IListQuery;
name:string
}
export interface IStateParams extends IState {
id: string;
}
13 案例
<template>
<div>
<el-card shadow="hover">
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="120px"
class="demo-ruleForm"
:size="formSize"
status-icon
>
<!-- 名称 -->
<el-form-item label="名称" prop="name">
<el-input v-model="ruleForm.name" />
</el-form-item>
<!-- 标签 -->
<el-form-item label="标签" prop="label">
<el-link type="primary" @click="addFruitConfig"> +添加一行 </el-link>
<span>(最多20个标签)</span>
</el-form-item>
<!-- 描述 -->
<el-form-item label="描述" prop="describe">
<el-input v-model="ruleForm.describe" :rows="2" type="textarea" placeholder="请输入描述" />
</el-form-item>
<!-- 确定 取消 -->
<div class="btn-flex">
<div class="box"></div>
<div class="box1">
<el-button type="primary"> 取消 </el-button>
<el-button type="primary" @click="submitForm(ruleFormRef)"> 确认 </el-button>
</div>
</div>
</el-form>
</el-card>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { activationApi } from '/@/api/devmgmt'
import { useRoute } from 'vue-router'
const Route = useRoute()
const uuid = Route.query.uuid
const type = Route.query.type
const router = useRouter()
const downloadDisabled = ref(false)
const downloadText = ref()
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
name: '',
label: [
{
label: ''
}
],
longitude: '',
latitude: '',
address: '',
describe: ''
})
// 输入校验
const validateName = (rule: any, value: string, callback: any) => {
if (ruleForm.name != '') {
downloadDisabled.value = true
} else {
downloadDisabled.value = false
}
callback()
}
// 必填
const rules = reactive<FormRules>({
name: [
{ required: true, message: '请输入设备名称', trigger: 'blur' },
{
validator: validateName,
trigger: 'change'
}
]
})
// 新增
const addFruitConfig = () => {
ruleForm.label.push({
label: ''
})
}
// 删除
const removeFruitConfig = (item: any) => {
const index = ruleForm.label.indexOf(item)
if (index !== -1) {
ruleForm.label.splice(index, 1)
}
}
// 确定
const submitForm = async (formEl: FormInstance | undefined) => {
let label: any = []
ruleForm.label.forEach((item: any) => {
let ary = Object.values(item)
label.push(...ary)
})
if (!formEl) return
await formEl.validate((valid: any, fields: any) => {
if (valid) {
const params = {
sid: uuid,
name: ruleForm.name,
type: type,
address: ruleForm.address,
longitude: parseFloat(ruleForm.longitude),
latitude: parseFloat(ruleForm.latitude),
detail: ruleForm.describe,
label: label
}
activationApi(params).then((res: any) => {})
} else {
console.log('error submit!', fields)
}
})
}
</script>
<style scoped lang="scss">
.width120 {
width: 120px;
}
.latitude-text .width300 {
width: 300px;
margin: 0 10px 0 22px;
}
</style>