Vue3 新项目默认工程文件理解

本文详细解析了Vue3新项目中关键文件，如main.ts引入组件和样式，index.html的编译过程，以及App.vue的简化示例，重点介绍了.d.ts文件在TypeScript项目中的作用，包括类型声明、模块声明等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3 新项目默认工程文件理解

文章目录

Vue3 新项目默认工程文件理解

0、工程文件结构图

1、main.ts

// 引入 createApp 函数
import { createApp } from 'vue'
// 引入 style.css 文件，编译后会自动插入到 index.html 文件中
import './style.css'
// 引入 App 组件，这里的 App.vue 是一个单文件组件，是应用的根组件
import App from './App.vue'

// 将跟组件传入 createApp 函数，通过 createApp 函数创建一个 Vue 应用实例
const app = createApp(App);
// 将 Vue 应用实例挂载到 id 为 app 的 DOM 元素上
// 这里的挂载目标是 src/index.html 文件中的 <div id="app"></div>
// src/index.html 引入了 /src/main.ts 文件，因此此文件会在 index.html 中执行
app.mount('#app');

2、index.html

源文件

vite 创建项目生成的原文件，未做任何更改！

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

编译后

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
    <script type="module" crossorigin src="/assets/index-DDUDQF2p.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-C_1Y39CH.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

3、App.vue

简化！

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

<template>
  <h1>Hello Woeld!</h1>
</template>

<style scoped>
</style>

4、`.d.ts` 文件作用

在 TypeScript 项目中，.d.ts 文件是声明文件（Declaration Files），它们的作用是声明模块、库、类库或任何其他类型信息，以便 TypeScript 编译器能够正确地推断和处理类型信息。

声明文件通常用于以下几种情况：

类型声明：为 JavaScript 库或代码提供类型信息，这样 TypeScript 编译器就能识别出变量、函数等元素的类型，从而提供更准确的类型检查和代码补全功能。
模块声明：声明模块、命名空间、类库等导出的内容，使得其他 TypeScript 代码能够导入并使用这些模块。
环境声明：声明全局变量、函数等，这些通常在JavaScript代码中直接赋值，TypeScript需要知道它们的类型。
第三方库声明：很多流行的 JavaScript 库并没有官方的 TypeScript 类型声明，开发者可以创建声明文件来为这些库提供类型信息。声明文件对于 TypeScript 项目的类型安全和开发体验至关重要，它们确保了类型系统的完整性和准确性。