从零开始搭建vue3项目（二）项目文件说明

前言

书接上回，我们使用vue create 命令搭建了一个最基础的项目，在该项目文件夹里出现了一些文件，就先简单介绍一下，文件都是干嘛的吧。

项目工程文件说明

文件预览

node_modules

存放项目里的依赖包资源

public

	存放静态资源，比如图片、字体文件等，该目录下的文件不会被webpack构建处理，执行打包命令后，会直接复制到打包输出的文件夹下。项目中可以通过相对路径访问，不能使用模块化引入。

• 例如：public目录下有个bg.jpg文件，可以在App.vue中通过相对路径的方式引入。
  
• 效果：
  

src

存放源代码文件，是我们开发过程主要打交道的文件

.browserslistrc

用于指定项目的目标浏览器和Node版本，不同的浏览器，不同的版本之间，CSS代码可能写法存在差异，通过该文件的声明，方便构建工具针对不同的浏览器生成兼容的CSS代码。

.gitignore

声明项目里哪些文件不需要git管理

babel.config.js

主要用来配置Babel编译工具的转译规则和插件

@vue/cli-plugin-babel/preset：用于Vue cli项目的Babel预设，包含了一系列的插件和设置，用于将新版本的JavaScript转换为向后兼容的代码，并支持在vue组件中使用JSX。

jsconfig.json

指定JavaScript项目根文件路径，编译选项等

package-lock.json

记录当前安装的所有依赖包的版本号，以及每个包依赖的其他npm包的版本号，相当于是一个依赖关系树。

package.json

描述和管理node项目的配置文件，可以修改项目的依赖包信息，自定义脚本命令，配置项目的入口文件，指定作者等等。

README.md

介绍项目的文件，方便其他人快速上手你的项目

vue.config.js

vue项目的自定义配置文件，可以指定静态资源的基础路径，配置代理服务器，自定义webpack相关配置，比如插件，loader等。

脚手架自动生成的文件就介绍到这里，后续我们在此基础上进行增量开发。

预知后事如何，且听下回分解