一. 基础的package.json的配置

{
  "name": "my-vue3-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@types/node": "^20.10.6",
    "class-validator": "^0.14.0",
    "json2typescript": "^1.5.1",
    "normalize.css": "^8.0.1",
    "terser": "^5.26.0",
    "tslib": "^2.6.2",
    "vue": "^3.3.8",
    "cd-http": "^1.0.20",
    "vue-class-component": "8.0.0-rc.1",
    "vue-property-decorator": "10.0.0-rc.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "typescript": "^5.2.2",
    "unplugin-auto-import": "^0.9.3",
    "unplugin-vue-components": "^0.21.1",
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.22"
  }
}

1. 库文件的作用

{
    "@types/node": "^20.10.6",  //是 TypeScript 中的一个声明文件库，用于提供 Node.js 核心模块和一些常用的第三方模块的 TypeScript 类型声明。   
    "class-validator": "^0.14.0", //是一个用于在 TypeScript 和 JavaScript 中进行对象验证的库。它可以帮助你定义验证规则，并检查对象是否符合这些规则。
    "json2typescript": "^1.5.1",  //主要涉及到安装库、定义 TypeScript 类、使用装饰器标记属性，并编写适当的代码来进行序列化和反序列化
    "normalize": "^0.3.1",
    "terser": "^5.26.0",  //是一个 JavaScript 解析器、压缩器和美化器的库。它用于压缩和混淆 JavaScript 代码，以减小文件大小并提高加载性能
    "tslib": "^2.6.2", //为 TypeScript 生成的 JavaScript 代码提供一些辅助函数和工具。它包含了一些帮助处理 TypeScript 编译器生成的一些代码，使得编译后的代码更加精简且性能更好
    "vue": "^3.3.8",
    "unplugin-auto-import": "^0.9.3", //一个用于在 Vue 3 项目中自动导入模块的插件。它可以根据你在代码中使用的模块，自动导入相应的内容。
    "unplugin-vue-components": "^0.21.1",  // 在 Vite 2 项目中自动导入 Vue 组件的插件。它可以根据你在代码中使用的 Vue 组件，自动导入并提供智能提示，从而减少手动导入的繁琐工作
    "vue-class-component": "8.0.0-rc.1",  //让vue支持类的写法
    "vue-property-decorator": "10.0.0-rc.3"//提供一些装饰器（Prop, Emit）
  }

二. tsconfig.json配置

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

三. 父子组件，传值和发送事件基础演示

1）父组件App.vue

<template>
  <div>
    <h1>{{ firstName }}</h1>
    <HelloWorld :firstName="firstName" @customEvent="handleCustomEvent" />
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-class-component'
import HelloWorld from './components/HelloWorld.vue'

@Options({
  components: { HelloWorld }
})
export default class App extends Vue {
  firstName: string = 'zyy'

  handleCustomEvent(payload: string) {
    console.log(`Received custom event with payload: ${payload}`)
  }
}
</script>

2）子组件HelloWorld.vue

<template>
  <div>
    <p>{{ firstName }}</p>
    <button @click="sendCustomEvent">Send Custom Event</button>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Emit } from 'vue-property-decorator'

export default class HelloWorld extends Vue {
  @Prop(String) readonly firstName!: string

  @Emit('customEvent')
  sendCustomEvent() {
    return 'Hello from HelloWorld!'
  }
}
</script>