2. vue项目结构剖析

一、前言

在正式开始学习具体vue内容时,从整体上了解一下vue结构是非常有必要的。

因为其脚手架默认生成了很多东西,如果你是第一次使用,那一定会感到疑惑的。

不过虽然其默认生成的文件众多,但在我们实际开发的时候需要用到的其实并不多,其它大多数都只需要了解一下即可。

二、文件介绍

vue默认生成的代码结构如下图:

image-20240116185522457

下面分别对其功能作用做出基本介绍。

  • .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文件夹,这个文件夹就是我们以后写代码的地方,也是用到最多的地方:

image-20240116185924816

下面是这些目录的作用:

  • assets:存放一些资源的文件,比如图片什么的,就和前面提到的public文件夹一样,不同之处在于assets会被打包,你可以在代码中用相对路径引用它们,而在public文件夹你只能用绝对路径,因为它是直接被复制到打包后的文件夹中的。

  • components:组件文件夹,因为vue中就是以组件为单位的,因此被统一放在了这个文件夹中方便管理,当然你如果非要重新给它取个名字也是可以的。

  • App.vue:这是根组件,是整个vue项目中最重要的一个组件,其他组件只有通过这个根组件才能被添加到页面中。

  • main.js:一些js代码,用于初始化整个vue项目。

三、探究index.html

首先我们来看这个index.html文件:

image-20240116190231490

前面已经不止一次提到过,这个文件就是最终vue生成的html文件,事实上,vue脚手架是直接将这个文件拷贝到编译完成后的文件夹中,也就是前文我们看到的dist目录下的那个index.html

那它直接拷贝过去如何能产生如此多好看元素的页面呢?

这就需要看到这个文件的内部做了什么,也就是2位置代码所做的事情。

vue对这个index.html文件只做了两件事:

  • 写一个div标签,将其id设置为app
  • 引入src文件夹中的main.js文件(引入的过程会执行这个js文件)

整个vue项目实际上都是通过这两步完成搭建的。

它的整体逻辑就是,所有你写在vue中的代码,最终都会生成在idapp的这个div里面,完成这个任务的就是紧随其后的main.js文件。

四、探究main.js

所以下面我们就来看看这个main.js文件。

image-20240116190721555

该文件中主要做了三件事,根据图中序号依次为:

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux