以下是一个
Vue 3使用
Vite和
TypeScript的示例：
首先，在
项目的根目录下创建一个`First.
vue`文件。在该文件中，我们可以定义
Vue组件的模板、脚本和样式。在这个示例中，我们将简单地在模板中显示一个`<div>`元素，内容为"First"。脚本部分为空，样式部分也为空。具体代码如下所示：
```html
<template>
<div>First</div>
</template>
<script lang="
ts" setup>
</script>
<style scoped lang="scss">
</style>
```
接下来，我们需要在
项目中
配置别名。在`
vite.config.
ts`文件中，我们可以使用`@
vitejs/plugin-
vue`插件以及`path`模块的`resolve`函数来
配置别名。具体代码如下所示：
```
typescript
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"。
```html
<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^cha
tsearchT3_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^cha
tsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
