vue3 + TypeScript 项目入门

基于vite脚手架创建的vue3项目重点文件：

vite.config.ts

整个工程的配置文件，可用于安装插件、配置代理等

index.html

其中

    <script type="module" src="/src/main.ts"></script>

这行代码引入了main.ts

src/main.ts

import './assets/main.css'

import { createApp } from 'vue' // 从 Vue 中导入了 createApp 函数
import App from './App.vue'

createApp(App).mount('#app')

支撑整个项目运行

createApp(App)：使用 createApp 函数创建了一个 Vue 应用实例，并将项目的主组件 App 作为参数传递给它。这个 App 组件通常是在 App.vue 文件中定义的。

.mount('#app')：将创建的 Vue 应用实例挂载到具有 id="app" 的 HTML 元素上。这个元素在你的 index.html 文件中定义，用于在页面上放置 Vue 应用。

app.vue

<template>

</template>

<script lang="ts">
  import Person from './components/Person.vue'
  export default {
    name:'App', //组件名
    components:{Person} //注册组件Person
  }
</script>


<style scoped>

</style>

component/Person.vue

<template>
  
</template>

<script lang="ts" setup name="Person">

</script>


<style>

</style>

setup语法糖：
<script lang="ts" setup name="Person">
需要：
1）安装：
        npm i vite-plugin-vue-setup-extend -D

2）在vite.config.ts中添加代码：