一、开发前配置
1.安装eslint+Volar+prettier(TypeScript Vue Plugin )扩展,支持vue3,ts语法校验。安装 Volar需禁用 Vetur。
2. vscode开启takeover模式,使Volar和vscode内置ts扩展 使用一个 ts语言服务工作,具体步骤参考官网:https://cn.vuejs.org/guide/typescript/overview.html#volar-takeover-mode
3.安装unplugin-auto-import插件,全局引入vue3常用方法。
使用步骤:
- 安装unplugin-auto-import插件
- 在vue.config.js文件中添加相关配置
- 第一次启动的时候把eslintrc.enabled设置为true,会在项目根目录生成一个eslintrc-auto-import.json文件,我们需要把他在eslint配置文件中引入一下。
二、开发中部分常用说明
1.不使用<script setup>时使用defineComponent定义组件开启props类型推导。
2.单文件组件中script标签,添加lang=”ts”属性,启用ts类型检查
3.强制类型转化 as
4. 当使用<script setup lang=”ts”>时,组件属性使用defineProps定义,
1)从参数中推到类型
2)传入泛型参数
3)添加默认值
5.在<script setup>中,使用defiineEmits定义要抛出的事件
6.不使用<script setup>时,可以在emits选中定义抛出的方法
7.ref,reactive标注类型
1)根据初始化值推导
2)定义时指定类型
3)ref()传入泛型参数
8.给computed标注类型
1)通常自动通过返回值推导出类型。
2)通过泛型参数指定类型
9.事件处理函数标注类型
10.Provide/inject标注类型
11、html模板引用标注类型
12、组件模板引用标注类型
13.使用<script setup>时,组件暴露属性或方法
14.属性使用。
const $attrs = useAttrs();
15.全局属性定义, app.config.globalProperties
+接口扩展