vue3+ts项目初始化

在Vue3中使用TypeScript，您可以通过Vue CLI来初始化一个项目。以下是步骤和示例代码：

1. 确保安装了最新版本的Vue CLI。如果没有，可以通过以下命令安装：

npm install -g @vue/cli

2. 使用Vue CLI创建一个新的Vue3项目，并添加TypeScript支持。运行以下命令：

vue create my-vue3-ts-app

3. 在创建过程中，CLI会询问一系列问题。对于初始化设置，您可以选择默认设置（使用箭头键选择Manually select features）。
4. 接下来，勾选“TypeScript”和任何其他您需要的特性。
5. 最后，完成初始化设置。

CLI会自动配置TypeScript并生成相应的项目文件。

项目结构大致如下：

my-vue3-ts-app
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.ts
│   ├── shims-tsx.d.ts
│   ├── shims-vue.d.ts
│   └── views
│       └── Home.vue
├── tsconfig.json
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

main.ts 文件可能看起来像这样：

import { createApp } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')

App.vue 文件可能包含一些TypeScript代码：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
 
export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
});
</script>

这样，您就初始化了一个基于Vue3和TypeScript的项目。