Vue项目目录结构介绍讲解

1.Vue单文件组件

node_modules:依赖的node工具包目录

public： 一般用于存放一些静态资源文件，例如图片，视频，音频等资源文件。需要特别注意的是webpack在进行打包的时候，会将public中的所有静态资源原封不动的进行打包。

src 文件夹，就是指我们存放项目源代码的文件夹，程序员的工作主要在本文件夹内。

src下面的目录结构：

assets：也是用于存放一些静态资源文件，与public中所不同的是，webpack在进行打包的时候，会将其认作为一个模块进行打包到js文件里面。

components： 一般用于存放非路由组件（还有全局组件）。

router：路由，此处配置项目路由。

store：状态管理。

views:路由页面组件

App.vue:是项目的主组件，页面的入口文件是整个项目的根组件，所有组件的后缀名均为·vue。

main.js是整个项目的入口文件。也是整个程序最开始执行的文件。

 .browserslistrc：可以通过npx browserslist 命令来查询浏览器版本，在查询时会根据.browserslistrc描述的版本进行查询，并在控制台打印出浏览器版本

.gitignore:文件负责标记哪些目录或文件不需要上传到git

babel.config.js:配置文件，用于兼容更多浏览器。

jsconfig.json:JavaScript 项目可以使用jsconfig.json文件来代替，它的作用几乎相同，但默认启用了一些与 JavaScript 相关的编译器标志。

package.json:项目的说明性文件，用于说明项目的名字，版本，所配置的依赖；

README.MD：说明性的一个文件。

vue.config.js:是以一个可选的配置文件，如果项目中的根目录 (和 package.json 同级的) 中存在这个文件，那么它会被 @vue/cli-service 自动加载。也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

yarn.lock:为了跨机器安装得到一致的结果, Yarn 需要比你配置在 package.json 中的依赖列表更多的信息。 Yarn 需要准确存储每个安装的依赖是哪个版本。
为了做到这样, Yarn 使用一个你项目根目录里的 yarn.lock 文件。这可以媲美其他像 Bundler 或 Cargo 这样的包管理器的 lockfiles。它类似于 npm 的 npm-shrinkwrap.json, 然而他并不是有损的并且它能创建可重现的结果。