mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-20 10:36:38 +08:00
74 lines
1.1 KiB
Markdown
74 lines
1.1 KiB
Markdown
### script-setup写法
|
||
|
||
#### 第一部分书写
|
||
|
||
template
|
||
|
||
#### 第二部分
|
||
|
||
script
|
||
|
||
##### 一、import的顺序
|
||
|
||
1. vue模块
|
||
2. vue相关类型
|
||
3. vue-router模块
|
||
4. vue-router相关类型
|
||
5. UI框架模块
|
||
6. UI框架相关类型
|
||
7. 第三方依赖
|
||
8. 第三方依赖相关类型
|
||
9. @/enum
|
||
10. @/setting
|
||
11. @/plugins
|
||
12. @/layouts
|
||
13. @/views
|
||
14. @/components
|
||
15. @/hooks
|
||
16. @/store
|
||
17. @/context
|
||
18. @/router
|
||
19. @/service
|
||
20. @/utils
|
||
21. @/interface
|
||
22. @/assets
|
||
23. 相对路径依赖
|
||
|
||
##### 二、TS类型声明
|
||
|
||
##### 三、defineProps、defineEmits、defineExpose、withDefaults
|
||
|
||
1. 定义属性，如：
|
||
|
||
`interface Props {`
|
||
|
||
`name: string;`
|
||
|
||
`age?: number;`
|
||
|
||
`}`
|
||
|
||
`const props = withDefaults(defineProps<Props>(), {`
|
||
|
||
`age: 24`
|
||
|
||
`})`
|
||
|
||
其中name是必须的属性，age是可选属性，通过withDefaults添加默认值
|
||
|
||
2. 定义emit事件
|
||
|
||
`const emit = defineEmits<{`
|
||
|
||
`(e: 'event-name', param: number): void;`
|
||
|
||
`}>()`
|
||
|
||
##### 四、响应式use函数
|
||
|
||
有些use函数需要传入响应式的变量参数时，则书写在声明的变量下面。
|
||
|
||
##### 五、变量、函数声明
|
||
|
||
##### 六、vue生命周期函数、nextTick执行
|