Vue3入门系列（二）目录结构认识

npm包管理器目录结构认识

这是使用@vue/cli初始化的项目结构，

node_modules

这是安装node后用来存放用包管理工具下载安装的包的文件夹。通俗的说，项目中通过npm安装的依赖都在这里。

public

public中存放的是一些静态文件，默认有favicon.ico和index.html。

src

该文件夹下存放的是你的源码，如下图所示

asserts

存放的是静态文件，与public的区别是这里存放的是有可能会发生变化的文件，所以建议这里存放自己开发的js/css，public中引入外部的js/css。

components

组件目录，自己封装的vue组件可放在该目录下。

App.vue

相当于页面的入口文件，项目启动后会默认将该文件当做首页。

Vue的三个非常标准的一个结构，分别是template、script和style，看名字也可以大概了解他们的作用。

template：这是用来写html木板的，包括第三方的、自己开发的组件，都可在里边使用，vue3之前只能有一个根元素，但是在vue3中是可以出现多个根元素的，如上图所示。
script：编写js的地方，在里边处理各种的业务逻辑，生命周期处理，导入组件等
style：编写css的地方

main.js

初始化vue实例并使用需要的插件，将内容渲染到主页面上，项目的入口文件。(引入插件后期会提到)

.browserslistrc

这个文件是为了配置兼容浏览器，一般不需要修改

.eslintrc.js

EsLint的配置文件，代码检查与格式化可在该文件中配置。

.gitignore

这是提交代码时忽略其中配置的文件与文件夹。

babel.config.js

这是babel的配置文件，通常来说也是不需要更改的。

package.json

项目启动方式，依赖管理，开发环境依赖配置的地方

这里就是三个命令npm run serve npm run build npm run lint，从上往下分别是：启动、打包和检查的命令，当然也可以自定义。

这是项目的依赖，因为是刚下载的，所以这里还什么都没有，如果加入了Router或着Vuex，那对应的依赖会在这里出现

这里是开发依赖，只作用与开发环境，而dependencies是需要发布到生产环境中的。

package-lock.json

记录了node_modules目录下所有模块的具体来源和版本号以及其他的信息。

vite目录结构介绍

可以发现vite与npm创建的脚手架项目大同小异，vite项目的index.html是在根目录的，在根目录的原因是vite启动的时候会将自己当做一个开发服务器；然后多了一个vite.config.js的文件，其实这个文件与vue.config.js这个文件作用是一样的，都是配置项目运行、打包、代理等的一些配置。具体可参考官方文档。

如果觉得不够清晰可查看我转载的一篇文章vue3.x 目录结构详解，里边对每个目录都有说明。

如果发现错误请在评论区指正，谢谢