2021-11-08 06:10:49 +08:00
|
|
|
|
### script-setup写法
|
|
|
|
|
|
|
|
|
|
|
|
#### 第一部分书写
|
2021-11-03 00:25:01 +08:00
|
|
|
|
|
|
|
|
|
|
template
|
|
|
|
|
|
|
2021-11-08 06:10:49 +08:00
|
|
|
|
#### 第二部分
|
|
|
|
|
|
|
2021-11-03 00:25:01 +08:00
|
|
|
|
script
|
|
|
|
|
|
|
2021-11-08 06:10:49 +08:00
|
|
|
|
##### 一、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执行
|
