从零开始自学vue3笔记（二）：项目结构与启动顺序

偏执的太偏执、 2024-04-08 13:26 14阅读 0赞

![在这里插入图片描述][800a2ea724e34c92a1fe3cffc3aec6eb.png]

## 一、dist文件夹 ##

这个文件夹中，一般是执行`npm run build`命令后，打包生成的前端项目；前端项目发版时，就是`把dist中的文件上传到nginx服务器的指定文件夹中`即可。

## 二、node\_modules文件夹 ##

这个文件夹中，一般是执行`npm install`命令后，从网上下载到的本vue项目需要的相关依赖文件，启动vue项目或打包vue项目都会用到。与java对比的话，感觉就像是依赖用到的jar包。

## 三、public文件夹 ##

这个文件夹中，有一个ico文件与index.html文件，这2个文件都是创建项目时自带的；  
项目启动时，会首先加载这个index.html文件，后续会讲到。

## 四、src文件夹 ##

这个文件夹中，就是项目主要的代码文件了。  
其中，有些文件夹是自己创建的；  
创建项目时会自带`App.vue`与`main.js`这2个文件，以及`HelloWorld.vue`文件；  
项目启动时，先加载index.html，然后加载main.js，然后加载App.vue，然后加载HelloWorld.vue；后续会详述。

## 五、.gitignore文件 ##

这个文件中，配置了不会自动添加到`git add`里的文件路径，防止提交git时自动带上不需要提交的文件。

## 六、package.json文件 ##

这个文件中，有几个需要注意的地方：

1.项目启动命令/打包命令：  
![在这里插入图片描述][9b0b61209bdf4f53b5314137bf225d8a.png]  
如图，这里配置了可以使用的项目启动命令`npm run serve`，打包命令`npm run build`。

2.项目依赖：  
![在这里插入图片描述][e019c5544bc040258bb364aa56e0cff6.png]  
配置后，执行`npm i`时，node\_modules中就会下载相关依赖文件。

其中，dependencies中的是运行时依赖；

devDependencies中的是开发时依赖，只在开发中用到，项目运行时不需要。

区分开发时依赖与运行时依赖的目的是为了减少插件在安装依赖时node\_modules的所占的内存，提升安装依赖的速度，节省线上及其的硬盘资源以及部署上线的时间。

## 七、package-lock.json文件 ##

执行`npm i`下载依赖后，就会自动生成这个文件，里面配置了这次下载的各种依赖的版本信息；  
下次再执行`npm i`时，就会先按照`package-lock.json`中配置的版本信息下载依赖了，防止依赖自动升级后、影响到项目的启动与打包。

## 八、项目启动顺序 ##

1.vue3项目启动时，会先加载`public/index.html`文件，其中主要有：  
![在这里插入图片描述][ea1c5fba6b6643dba820781f02192ca1.png]

2.然后，会加载main.js文件：  
![在这里插入图片描述][80dd360761214df49a016ee4d8f09775.png]  
其中，从vue文件中导入了一个createApp方法；  
把App.vue文件导入了，起名叫App；  
然后执行createApp方法，把App.vue页面当做参数传入，并执行mount(‘\#app’)方法，意思就是让index.html的`<div id="app"></div>`中显示App.vue页面。

3.App.vue页面中，引入了HelloWorld.vue页面；  
在components里申明下引入的页面；  
然后在`<template>`中使用了`<HelloWorld msg="MyVue"/>`页面，并传入了一个自定义msg参数。  
![在这里插入图片描述][7285b7b1868b4e7ca268bb5d7a5bb468.png]  
4.HelloWorld.vue页面内容如下：  
![在这里插入图片描述][ac58ef7928d340808434b1aa939c339a.png]  
其中，在props里申明了msg，用来接收传入的参数；  
在`<h1>{ {msg}}</h1>`里用到了msg，就可以展示在页面上这个值。  
这样，页面最终展示的主要就是`HelloWorld.vue`页面的内容了。

5.最终，vue3启动后，默认页面样例如下（主要是`HelloWorld.vue`页面的内容）：  
![在这里插入图片描述][e43f93a8a0774a6585c1ffda079fc511.png]

[800a2ea724e34c92a1fe3cffc3aec6eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/23015899d882496295b242f4e4730cf6.png
[9b0b61209bdf4f53b5314137bf225d8a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/224f626c04684af291f26f5ae94cc9af.png
[e019c5544bc040258bb364aa56e0cff6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/43c2f476d2c042a29f6a2963c0c08aaa.png
[ea1c5fba6b6643dba820781f02192ca1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/62e66189190945479f5529f993f6e498.png
[80dd360761214df49a016ee4d8f09775.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/221fe123f0a646f58981bd812ef1ba4c.png
[7285b7b1868b4e7ca268bb5d7a5bb468.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/973f2dedcb084fb19c456168f42e2f68.png
[ac58ef7928d340808434b1aa939c339a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5df64272209d421eb9a22a4bc9684dad.png
[e43f93a8a0774a6585c1ffda079fc511.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/a137c3b17af14d41a966faeea74d7bcb.png