一、前言
在正式开始学习具体vue内容时，从整体上了解一下vue结构是非常有必要的。
因为其脚手架默认生成了很多东西，如果你是第一次使用，那一定会感到疑惑的。
不过虽然其默认生成的文件众多，但在我们实际开发的时候需要用到的其实并不多，其它大多数都只需要了解一下即可。
二、文件介绍
vue默认生成的代码结构如下图：
下面分别对其功能作用做出基本介绍。
.vscode：看名字就知道了，这是vscode这款软件的配置文件夹，里面放置的是一些vscode的配置文件，大多数时候不用管node_modules：即node模块，默认是没有生成的，只有当你运行npm install之后才会生成，这个文件夹中放置的就是你下载之后的模块、包，比如vue的“脚手架”代码就在这里面，当然也还有许多其它的东西，大多数时候也不用管。public：放置公共资源的，比如一些图片什么的，这样在最后编译的时候，会直接将里面的东西复制到编译生成的地方，也就是前文提到的dist目录下，比如那个图标便是在该目录下存放的。src：这个文件夹就重要了，它是我们写代码的地方，所有的代码都是放在这个文件夹中的。.gitignore：这是用于git忽略文件的，一般也不用管，里面的内容已经默认给我们生成好了，想要了解更多，可以看一看git相关的教程，比如git详解。index.html：这个文件很重要，但我们不用管，前面编译后的dist目录下的html文件就是直接将该文件复制过去的。package.json：包管理文件，npm install这个命令之所以有效，就是因为脚手架所需要的包都被写好在了这个文件中，下载后的包就被存放在了前面提到的node_module文件夹中。package-lock.json：这是npm根据上面的package.json文件自动生成的一个文件，用于锁定一些包的版本、链接等等，完全不需要我们自己管。README.md：这个文件用于介绍本项目是做什么的，拿给别人看的，写不写看你自己了。vite.config.js：这是vite的配置文件，vite是一个优秀的热重启工具，可以让你在更改文件的同时，实时看到效果，并且速度很快，一般情况下我们同样不需要管。
然后再进入src文件夹，这个文件夹就是我们以后写代码的地方，也是用到最多的地方：
下面是这些目录的作用：
-
assets：存放一些资源的文件，比如图片什么的，就和前面提到的public文件夹一样，不同之处在于assets会被打包，你可以在代码中用相对路径引用它们，而在public文件夹你只能用绝对路径，因为它是直接被复制到打包后的文件夹中的。 -
components：组件文件夹，因为vue中就是以组件为单位的，因此被统一放在了这个文件夹中方便管理，当然你如果非要重新给它取个名字也是可以的。 -
App.vue：这是根组件，是整个vue项目中最重要的一个组件，其他组件只有通过这个根组件才能被添加到页面中。 -
main.js：一些js代码，用于初始化整个vue项目。
三、探究index.html
首先我们来看这个index.html文件：
前面已经不止一次提到过，这个文件就是最终vue生成的html文件，事实上，vue脚手架是直接将这个文件拷贝到编译完成后的文件夹中，也就是前文我们看到的dist目录下的那个index.html。
那它直接拷贝过去如何能产生如此多好看元素的页面呢？
这就需要看到这个文件的内部做了什么，也就是2位置代码所做的事情。
vue对这个index.html文件只做了两件事：
- 写一个
div标签，将其id设置为app - 引入src文件夹中的
main.js文件（引入的过程会执行这个js文件）
整个vue项目实际上都是通过这两步完成搭建的。
它的整体逻辑就是，所有你写在vue中的代码，最终都会生成在id为app的这个div里面，完成这个任务的就是紧随其后的main.js文件。
四、探究main.js
所以下面我们就来看看这个main.js文件。
该文件中主要做了三件事，根据图中序号依次为：
