一.开端

一个新的vue项目下有着几个文件夹和一些文件。他们都有什么用？应该存放什么？想弄清楚这些问题，我们就需要对vue项目的目录结构有所了解。

注意：笔者使用的是最新的@vue/cli 4.5.10版本，使用旧版本（vue-cli 1.x/2.x）构建的项目目录结构会有所不同！

vuepress多级目录_vue

二.node_modules文件夹

node_modules文件夹是项目的依赖库，项目所需的所有依赖都存放在这个文件夹下，在开发过程中使用npm install 命令安装的依赖也会放置在该文件夹下。 我们经常看到的“包”、“依赖”、“库”、“模块”、“框架”等名词都可以笼统地理解为在开发过程中为了方便快捷，引入提前开发好、封装好的一些工具，拿来就可以直接用，而这些工具的代码下载好后就全部存放在该文件夹中。做好心理准备，实际开发中这个文件夹的size会变得很大。

三.public文件夹

vuepress多级目录_json_02

public文件夹用于存放静态资源，存放在这里的静态资源不会被webpack处理 （webpack是什么？），而且其中的资源只能通过绝对路径来访问。

新建项目中public文件夹下有两个文件。favicon.ico是网页标题旁的图标，可以通过替换这个文件来自定义该图标。

vuepress多级目录_vue_03

index.html是首页入口，也就是运行项目后在浏览器中显示的界面，所有的vue组件经过渲染后将会注入到这个HTML文件中在浏览器窗口中显示。

vuepress多级目录_vue_04

关于public文件夹的相关使用方法，在Vue CLI的官方文档中还有详细说明，感兴趣的朋友可以自行查阅。

三.src文件夹

src文件夹是日常开发中与之打交道最频繁的文件夹。文件夹下有两个子文件夹以及App.vue和main.js两个文件，在开发过程中可以按功能需要在src文件夹下创建新的子文件夹，以便将不同用途的文件实现归类，不过一般情况下App.vue和main.js两个文件是不需要挪动位置的。

vuepress多级目录_vue.js_05

1.assets文件夹

assets文件夹和public文件夹用途类似，同样用于存放图片、css文件等静态资源。不同之处在于该文件夹下的静态资源在打包时会经过webpack处理并被解析为模块依赖，而且其中的资源只能通过相对路径来访问。

2.components文件夹

components文件夹存放的是一个个vue组件。 我们知道，网页是由html文件组成的，在使用vue进行开发的过程中，以.vue为后缀的vue组件就可以理解为一个个html文件，vue项目就是由若干个vue组件构成的，其中

  • <template></template>相当于html文件中的<body></body>，其中内容构成网页的骨架
  • <script></script>是JavaScript的容身之处
  • <style></style>则用来描述css样式表

可以说，vue组件其实和HTML文件别无二致，只是在运行前会将vue组件渲染成浏览器能解析的真正的html、JavaScript、css文件。

vuepress多级目录_vuepress多级目录_06

3.App.vue文件

App.vue是项目的根组件，所有页面都是在这个组件之下进行切换的。

4.main.js文件

项目的入口文件，初始化vue对象并且加载各种公共组件

四. .gitignore文件

.gitignore文件指明了使用git进行团队协作开发时应当忽略修改，不进行上传的文件以及文件夹。

通常情况下体积庞大的node_modules文件夹会被列入.gitignore文件中。

vuepress多级目录_vuepress多级目录_07

五.babel.config.js文件

插件babel的配置文件，babel插件用于将ES6及以上版本的代码转换为ES5。 关于该文件详细的官方文档

六.package.json文件

我们前面提到，存放项目依赖的node_modules文件夹一般是不会上传的。那我们在共享项目的过程中，他人如何得知这个项目使用了哪些依赖呢？这时候package.json文件就派上用场了。这个文件定义了项目所需要的所有依赖以及各种配置信息（如名称、版本、许可证等等）。通过执行npm install命令，npm就会根据package.json中的内容自动下载所需要的依赖，完成相应环境的配置。这也就是为什么node_modules文件夹可以不用上传的原因。

关于package.json更详细的解释可以参考以下两篇文章：阮一峰的package.json文件教程npm关于package.json文件的官方文档

七.package-lock.json文件

package.json文件指明的其实是依赖版本的范围，举个例子，package.json文件有如下内容：

"dependencies": {
	"vue": “^2.6.11"
}

版本号前^代表向后兼容依赖，也就是说即使package.json文件中的版本号是2.6.11，执行npm install时会保持大版本号一致然后下载最新版本。团队协作时就有可能因为依赖的版本号不一致而产生bug。即我安装的是2.6.11，两天之后发布了新版本2.6.15，这时根据同一份package.json文件在他人电脑中安装的版本就会是新版本2.6.15，这就导致了团队不同设备间使用的依赖版本号不同的问题，项目中错综复杂的依赖关系也会因此极容易产生报错。 package-lock.json文件在执行npm install时被创建和修改，用以记录当前状态下实际安装的各个依赖的具体来源和确切的版本号，有了该文件就能确保在新的机器或是换了新的下载源后每一次执行npm install时下载的依赖版本都是完全一致的。

npm关于package-lock.json文件的官方文档

八.README.md文件

项目的描述文件，其实就是一份markdown格式的文档。一般将项目的各种说明信息和开发者希望告诉他人的内容写在里面。