一、前言
在正式开始学习具体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
文件。
该文件中主要做了三件事,根据图中序号依次为: