给我一份Vue3+ts的工程实例

以下是一份基于Vue3和TypeScript的工程实例：

1. 安装Vue CLI

首先，你需要安装Vue CLI，这可以通过以下命令完成：

npm install -g @vue/cli

2. 创建Vue项目

创建一个新的Vue项目，使用以下命令：

vue create my-project --default --inlinePreset '{"useConfigFiles":true,"plugins":{"@vue/cli-plugin-typescript":{}}}'

这将创建一个基于TypeScript的Vue项目。

3. 安装依赖

进入项目文件夹，然后安装必要的依赖：

cd my-project
npm install

4. 配置VSCode

在VSCode中打开项目文件夹，然后安装以下插件：

- Vetur
- ESLint
- Prettier

然后，在项目根目录下创建一个`.vscode`文件夹，并在其中创建一个`settings.json`文件，将以下内容添加到文件中：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  },
  "vetur.validation.template": false
}

这将启用自动修复ESLint错误和自动格式化代码。

5. 创建组件

在`src`文件夹下创建一个名为`components`的文件夹，并在其中创建一个名为`HelloWorld.vue`的文件，将以下内容添加到文件中：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  }
})
</script>

<style scoped>
h1 {
  font-weight: bold;
}
</style>

这将创建一个包含一个`msg`属性的Vue组件。

6. 在App.vue中使用组件

在`src`文件夹下打开`App.vue`文件，并将以下内容添加到`template`标签中：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

这将使用`HelloWorld`组件并传递一个名为`msg`的属性。

7. 运行项目

最后，使用以下命令运行项目：

npm run serve

打开浏览器，访问`http://localhost:8080`，你应该可以看到一个包含欢迎消息的页面。

这就是基于Vue3和TypeScript的工程实例。