vue3 + TypeScript 项目入门

最新推荐文章于 2024-09-20 10:35:46 发布

Erick Yu

最新推荐文章于 2024-09-20 10:35:46 发布

阅读量389

点赞数 8

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/ykrsgs/article/details/136763405

版权

本文详细介绍了如何基于Vite脚手架创建的Vue3项目中，关键文件如vite.config.ts的配置、index.html中的组件引入以及App.vue和子组件Person.vue的结构。重点讲解了如何使用createApp和setup语法糖来构建和管理组件。

摘要由CSDN通过智能技术生成

基于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中添加代码：