77 lines
2.0 KiB
Markdown
77 lines
2.0 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检查，但过于强制可以熟悉后再使用
|
||
```
|
||
|
||
* ##### 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为页面是否需要缓存，如：
|
||
|
||
|
||
|
||
* ##### 待补充
|