guides/vue.md

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语义化资料 如：参考链接

• 组件的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为页面是否需要缓存，如：

• 开发中遇到的问题整理

• 待补充