首先我们来看下项目的文件结构图，如下：
各个文件及文件夹作用如下：
| 文件或文件夹名称 | 作用 |
| .vscode | VisualStudioCode开发工具的配置信息存放目录，从这个目录可以看出vue3确实是推荐使用vscode作为开发工具的。 |
| node_modules | 项目中用到的包存放目录，当我们用 "npm install 包名" 安装包之后，该包的代码文件就下载到这个目录下。 |
| public | 公共资源存放目录，比如图片、配置文件等可以集中放在这里方便后续管理。 |
| src | 项目源代码存放目录 |
| src/assets |
资源存放目录，比如图片、CSS文件等， 和public不同的是，存放在assets文件夹中的资源在引用的方式上有区别，后面再具体讲。 |
| src/components |
页面和组件存放目录（一个页面可能包含0或多个组件，他们都以.vue为后缀名）。 为了便于区分页面和组件，一般会在src文件夹下新建一个views的文件夹来存放页面， 而components专门放组件。 |
| src/components/icons | 存放svg格式的图标 |
| .gitignore | 这是版本管理工具使用的文件，用来定义项目中那些文件不需要进行版本管理，如果不使用git可以删除这个文件。 |
| index.html |
网站的页面文件，全站有且仅有这一个html页面，这样的web项目也称 SPA（Single Page Application），即单页应用。 index.html页面中有一个div元素，当跳转其他页面的时候，其本质是 vue3框架将目标页面的html内容获取后设置成该div的innerHTML（注意：vue3中的页面以 .vue为后缀名而不是.html），在页面不刷新的情况下完成页面内容的替换，同时vue3还负责修改网址等，给用户的感觉就是从一个页面跳转到另外一个页面了。index.html只充当所有页面的容器，不管项目增加什么功能，这个文件几乎都不需要修改（这里用了几乎一词，后面涉及到修改的情况我们再讲）。 |
| package.json | 管理项目引用的js包，使用npm指令安装的包会记录到这个文件中。 |
| package-lock.json |
记录node_modules目录下所有包（也可称为模块）的名称、版本号、下载地址、运行环境、及这个包又依赖了哪些依赖等。 该文件是在npm5之后出现的，因为 package.json只锁定了包的大版本号(版本号第一位)，当我们重新使用npm install 拉取包的时候会下载大版本下的最新小版本，为了稳定性考虑，很多时候我们并不想升级小版本，package-lock.json能帮我们锁定版本不升级，另外，package.json不会记录包依赖的其他包信息，而package-lock.json会。 如果我们想安装指定版本的包该怎么做呢？只需要在包名后加上"@x.x.x" 就可以了 ，x.x.x表示具体版本号 ， 和包名之间用@ 隔开，形如： npm install [email protected] |
| vite.config.js | 项目配置信息 |
项目中还有几个文件，比如 main.js、App.vue 等我们没有涉及到。
在下一篇中我们会讲怎么修改这些文件，并完成从一个页面跳转到另一个页面这个最基本的操作。
标签：文件,package,微信,json,文件夹,存放,vue3,页面 From： https://www.cnblogs.com/pfm33/p/17317486.html