Update vue.md

vue.md

@@ -9,7 +9,107 @@
 * 提交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>