Vue3-03 熟悉src文件夹及Vue文件格式

Sapphire～2026-01-09 14:14

文章目录

[src 源代码](#src 源代码)
- [从main.ts 开始的](#从main.ts 开始的)
- [index.html 中必须写的两部分内容](#index.html 中必须写的两部分内容)
- [main.ts 中必写](#main.ts 中必写)
[vue 文件组成三部分](#vue 文件组成三部分)
总结
问题

src 源代码

从main.ts 开始的

创建一个应用（花盆），这个应用的根组件是App，把这个花插在花盆里就是createApp(App)，把这个花盆摆在哪里就是 mount的位置。

index.html 中必须写的两部分内容

main.ts 中必写

复制代码

import {createApp} from 'vue'
import App from './App.vue'

createApp(App).mount('#app)

vue 文件组成三部分

复制代码

<template>
<!-- html 结构 -->
</template>

<script>  
// 这里vue3推荐ts格式，否则会有一个蓝色的小警告，加上lang='ts'就可以了，当然还可以写JS
// JS或TS
</script>

<style>
/* 样式 */
</style>

src 中最主要的文件：main.ts，如果没有就会报错 404，因为入口index.html文件中引入了这个ts文件。

总结

Vite 项目中，index.html 是项目的入口文件，在项目最外层。
加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。
Vue3**中是通过 **createApp 函数创建一个应用实例。

问题

import {createApp} from 'vue' 这个导入为什么加大括号?
import App from './App.vue' 这个为什么不加括号?

默认导出（Default Export）, 一个模块只能有一个默认导出

加花括号：导入的是模块的命名导出,一个模块可以有多个命名导出（Named Export）

命名导出：用于导出多个相关的功能，让使用者可以按需选择

默认导出：用于导出模块的主要功能或唯一功能

import App from './App.vue' 这里的 App 是文件 App.vue 中 export default 的 name 属性。