ruoyi-plus-soybean/doc/vue书写规范.md

script-setup写法

第一部分

template

第二部分

script

一、import的顺序, 依次按照下面的顺序。

1. vue模块

   import {  } from 'vue';
   

2. vue相关类型

   import type {  } from 'vue';
   

3. vue-router模块

   import {  } from 'vue-router';
   

4. vue-router相关类型

   import type {  } from 'vue-router';
   

5. UI框架模块

   import {  } from 'naive-ui';
   

6. UI框架相关类型

   import type {  } from 'naive-ui';
   

7. 第三方依赖

   import BScroll from 'bscroll';
   

8. 第三方依赖相关类型

   import type {  } from 'bscroll';
   

9. @/enum

   import {  } from '@/enum';
   

10. @/setting

    import {  } from '@/setting';
    

11. @/plugins

    import {  } from '@/plugins';
    

12. @/layouts

    import {  } from '@/layouts';
    

13. @/views

    import {  } from '@/views';
    

14. @/components

    import {  } from '@/components';
    

15. @/hooks

    import {  } from '@/hooks';
    

16. @/store

    import {  } from '@/store';
    

17. @/context

    import {  } from '@/context';
    

18. @/router

    import {  } from '@/router';
    

19. @/service

    import {  } from '@/service';
    

20. @/utils

    import {  } from '@/utils';
    

21. @/interface

    import {  } from '@/interface';
    

22. @/assets

    import {  } from '@/assets';
    

23. 相对路径依赖

    import {  } from './components';
    

二、TS类型声明

interface Props {
	/**姓名 */
  name: string;
	/**年龄 */
  age?: number;
}
interface Emits {
  /**
   * 删除事件
   * @param id - 删除项的id
   */
	(e: 'delete', id: number): void;
}

三、defineProps、defineEmits、withDefaults

1. 定义属性，如：

const props = withDefaults(defineProps<Props>(), {
  age: 24
});

其中name是必须的属性，age是可选属性，通过withDefaults添加默认值

2. 定义emit事件

const emit = defineEmits<Emits>();

四、响应式use函数

有些use函数需要传入响应式的变量参数时，则书写在声明的变量下面。

const router = useRouter();
const route = useRoute();

/**dom引用 */
const domRef = ref<HTMLElement | null>(null);
const { height: domRefHeight } = useElementSize(domRef); //获取domRef的响应式高度

五、变量、函数声明

六、vue生命周期函数、nextTick执行

七、defineExpose