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检查，但过于强制可以熟悉后再使用

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

• 待补充