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

一、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.项目启动命令/打包命令：

如图，这里配置了可以使用的项目启动命令npm run serve，打包命令npm run build。

2.项目依赖：

配置后，执行npm i时，node_modules中就会下载相关依赖文件。

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

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

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

七、package-lock.json文件

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

八、项目启动顺序

1.vue3项目启动时，会先加载public/index.html文件，其中主要有：

<div id="app"></div>

2.然后，会加载main.js文件：

其中，从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参数。

4.HelloWorld.vue页面内容如下：

其中，在props里申明了msg，用来接收传入的参数；
在<h1>{{msg}}</h1>里用到了msg，就可以展示在页面上这个值。
这样，页面最终展示的主要就是HelloWorld.vue页面的内容了。

5.最终，vue3启动后，默认页面样例如下（主要是HelloWorld.vue页面的内容）：