vue3+vite+ts示例

以下是一个Vue 3使用Vite和TypeScript的示例：

首先，在项目的根目录下创建一个`First.vue`文件。在该文件中，我们可以定义Vue组件的模板、脚本和样式。在这个示例中，我们将简单地在模板中显示一个`<div>`元素，内容为"First"。脚本部分为空，样式部分也为空。具体代码如下所示：

<template>
  <div>First</div>
</template>

<script lang="ts" setup>
</script>

<style scoped lang="scss">
</style>

接下来，我们需要在项目中配置别名。在`vite.config.ts`文件中，我们可以使用`@vitejs/plugin-vue`插件以及`path`模块的`resolve`函数来配置别名。具体代码如下所示：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

最后，在项目中创建一个`Second.vue`文件，代码如下所示。它的结构与`First.vue`相似，只是模板中显示的内容变为"Second"。

<template>
  <div>Second</div>
</template>

<script lang="ts" setup>
</script>

<style scoped lang="scss">
</style>

这样，我们就完成了一个简单的Vue 3使用Vite和TypeScript的示例。在这个示例中，我们创建了两个组件`First.vue`和`Second.vue`，并在Vite的配置文件中配置了别名以方便引用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架](https://blog.csdn.net/BDawn/article/details/127697454)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3：vue3+vite+ts+pinia](https://blog.csdn.net/snowball_li/article/details/125001728)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]