177 lines
6.3 KiB
Markdown
177 lines
6.3 KiB
Markdown
# vue约定规范
|
||
|
||
* ##### 代码风格配置：
|
||
```
|
||
* 使用element 框架时，eslint配置使用："eslint-plugin-vue",默认element-admin框架已完成配置
|
||
大部分规则也都配置在了eslint-plugin-vue之中，当没有遵循规则的时候会报错
|
||
* 单独安装: npm install eslint-plugin-vue -D
|
||
* 使用quasar框架时创建(npm quasar create)时已完成配置
|
||
* 提交npm lint检查代码通过后再提交代码, 也可以添加husky检查，但过于强制可以熟悉后再使用
|
||
```
|
||
|
||
* ##### 不要在css中直接修改框架内部class的样式，可自行添加class进行覆盖或直接标签上style进行覆盖
|
||
|
||
* ##### !! 命名
|
||
文件和变量命名使用驼峰式，文件大驼峰，变量小驼峰， 尽量见名思义，看见文件名就可以知道这个文件下的大概内容。变量命名不要 User1、User2，User111这样，明明是设备的数据搞个Userxxxx来存放
|
||
文件名尽量双拼写单词，被引入时文件名即组件名
|
||
|
||
```
|
||
不明所以的命名
|
||
//****
|
||
const checked1 = ref("");
|
||
const checked2 = ref("");
|
||
const checked3 = ref("");
|
||
const input = ref("");
|
||
const value = ref("");
|
||
//**
|
||
const value1 = ref(""); //操作设备的数据
|
||
const value2 = ref(""); //操作账号的数据
|
||
let index1 = 0; //一级索引
|
||
let index2 = 0;
|
||
const search = ref("");
|
||
const search2 = ref("");
|
||
```
|
||
|
||
* ##### html标签使用要语义化
|
||
|
||
上网搜html语义化资料 如：[参考链接](https://www.gaotianyang.top/archives/202007298e596984/)
|
||
|
||
|
||
* ##### 组件的data属性使用驼峰式
|
||
|
||
* ##### git提交不要提交无用文件
|
||
|
||
* ##### 分组件: 先清楚为什么要分组件和分组件的作用
|
||
|
||
1. 单一职责原则：每个组件只负责一项功能，这样可以使组件的代码更加简洁易读，并且方便维护和重用。
|
||
|
||
2. 可复用性：每个组件都应该尽量独立，以便在其他地方重复使用。
|
||
|
||
3. 组件之间的耦合度：组件之间应该尽量避免耦合，这样可以使得组件的代码更加灵活，便于维护和修改。
|
||
|
||
4. 让组件尽可能小：尽可能使组件的代码行数少，这样可以使代码更易读，并且方便维护。
|
||
|
||
5. 可读性：组件的代码应该有良好的结构，并且有适当的注释，便于阅读和理解。
|
||
|
||
```
|
||
无效分组件： 一个表格页面只在当前页面使用，不需要在其他页面使用，那么无需分组件，直接在页面中使用
|
||
<template>
|
||
<main>
|
||
<el-container>
|
||
<TableView />
|
||
</el-container>
|
||
</main>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import TableView from '@/components/ListModel/Table.vue';
|
||
</script>
|
||
|
||
|
||
```
|
||
|
||
```
|
||
该拆分的没有拆分组件： 一个表格页面在当前页面和其他页面都需要使用，那么需要分组件，并且在当前页面使用，如下面省市区 和项目/地块选择的代码，大部分的表格页面都用到，而且每个都要请求接口获取下拉数据，应该拆分成一个组件，这样可以减少代码量，并且可以复用，
|
||
|
||
<el-text class="box-up-title">作物长势监测</el-text>
|
||
<el-form inline :model="formData" class="box-up-form">
|
||
<el-form-item label="省">
|
||
<el-select v-model="formData.province" placeholder="区域选择或搜索" clearable filterable @change="provinceSelected">
|
||
<el-option v-for="item in provinceList" :label="item.cityName" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="市">
|
||
<el-select v-model="formData.city" placeholder="区域选择或搜索" clearable filterable @change="citySelected" no-data-text="请先选择上级区域">
|
||
<el-option v-for="item in cityList" :label="item.cityName" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="区/县">
|
||
<el-select v-model="formData.county" placeholder="区域选择或搜索" clearable filterable @change="countySelected" no-data-text="请先选择上级区域">
|
||
<el-option v-for="item in countyList" :label="item.cityName" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="地块">
|
||
<el-select v-model="formData.plot_id" placeholder="地块选择" clearable filterable no-data-text="请先选择区县">
|
||
<el-option v-for="item in plotList" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="项目">
|
||
<el-select v-model="formData.species_id" placeholder="项目选择或搜索" clearable filterable @change="speciesSelected">
|
||
<el-option v-for="item in speciesList" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="地块选择">
|
||
<el-select v-model="formData.variety_id" clearable filterable >
|
||
<el-option v-for="item in varietyListComputed" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
```
|
||
|
||
* ##### vue3 统一使用setup风格,更简洁易明
|
||
|
||
```
|
||
<!-- js -->
|
||
<script setup>
|
||
|
||
<!-- ts -->
|
||
<script setup lang="ts">
|
||
```
|
||
|
||
* ##### 推荐使用Typescript/jsdoc开发
|
||
|
||
* ##### 组件、属性、事件、插槽的命名使用驼峰命名法，其中组件名首字母大写，调用时均使用小写中划线方式，如：
|
||
```
|
||
组件命名: MyComponent
|
||
|
||
组件的属性命名: myProperty
|
||
|
||
组件的事件命名: myEvent
|
||
|
||
组件的插槽命名: mySlot
|
||
|
||
完整示例:
|
||
|
||
<my-component :my-property="value" @my-event="handleMyEvent">
|
||
<template v-slot:my-slot> </template>
|
||
</my-component>
|
||
|
||
```
|
||
|
||
* ##### 布局组件文件使用xxxLayout结尾命名，如：
|
||
```
|
||
MainLayout
|
||
DeviceLayout
|
||
```
|
||
|
||
* ##### 页面文件使用xxxPage结尾命名，如：
|
||
```
|
||
DevicePage
|
||
DeviceDetailPage
|
||
```
|
||
|
||
* ##### 路由定义每个页面必须带上唯一name，通常与页面文件名一致，页面跳转统一使用name切换，不允许直接push路径方式，如：
|
||
```
|
||
{
|
||
path: '/device',
|
||
name: 'DevicePage',
|
||
component: () => import('@/views/device/DevicePage.vue')
|
||
}
|
||
|
||
跳转到页面时使用router.push({name: 'DevicePage'})
|
||
|
||
```
|
||
|
||
* ##### 不同组件间的引用尽量使用@/views/xxx/xxx.vue的路径方式，避免使用相对路径方式，如：
|
||
```
|
||
import DevicePage from '@/views/device/DevicePage.vue'
|
||
有的项目为 src
|
||
import DevicePage from '@/views/device/DevicePage.vue'
|
||
```
|
||
|
||
* ##### 路由定义每个页面必须带上meta属性，其中meta.title为页面标题，meta.icon为页面图标，meta.keepAlive为页面是否需要缓存，如：
|
||
|
||
* ##### [开发中遇到的问题整理](./vue-qa.md)
|
||
|
||
* ##### 待补充
|