vite+vue3+ts 项目搭建

要使用Vite搭建基于Vue 3和TypeScript的项目，你需要执行以下步骤：

1. 确保你已经安装了Node.js（建议使用最新的LTS版本）。

2. 安装Vite CLI工具：

   
   
   
   npm init vite@latest

3. 在命令行中通过Vite CLI创建新项目，选择Vue + TypeScript模板：

   
   
   
   npm init vite@latest my-vue3-app -- --template vue-ts

4. 进入项目文件夹：

   
   
   
   cd my-vue3-app

5. 安装依赖：

   
   
   
   npm install

6. 启动开发服务器：

   
   
   
   npm run dev

以上步骤将会创建一个新的Vue 3项目，并且支持TypeScript。

这是一个简单的Vue 3组件示例，使用TypeScript编写：

<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'AppComponent',
  data() {
    return {
      message: 'Hello, Vite + Vue 3 + TypeScript!',
    };
  },
});
</script>

这个组件定义了一个简单的数据属性message，并在模板中显示它。这个示例展示了如何在Vue 3和TypeScript项目中编写组件。