前言

我们昨天了解了一下如何创建一个vue项目，但是作为一个开发者，仅仅会创建一个项目框架是不够的，我们还需要来了解下vue项目的结构。只有我们对项目的结构熟悉了，知道哪部分是干什么，有什么作用，我们才能更好的创建我们的项目。

vue项目的基本结构

我们创建了一个vue的项目，Vue CLI会帮我们自动创建好我们vue的基本结构。如图所示

我们可以看到我们的项目里有许多的目录，这就是Vue CLI帮我们自动创建的结构，每个结构都有他相应的作用。下面我就来分享一下这些结构的主要功能。

.vscord

这个是我们安装插件的一个配置文件

node_modules

node_modules我们昨天其实也知道了，他是用来存放我们的项目依赖包的，我们项目需要用到的所有依赖都存放在这里面。我们在这里先不介绍这里面的依赖包了，

public

public是用来存放公共静态资源的，简单来说就是存放任何你想让用户浏览器直接访问而无需通过Vue应用加载机制的静态文件。例如网站图标，一些图片，静态数据文件，还有一些字体文件，这些文件都可以存放在public目录下。项目的主入口index.html亦可以存放在这里面。如图

由于这些文件在构建时位置不变，可以直接使用绝对路径引用它们，如 /img.png。

默认就给我们放了一个图标文件在里面，在后续自己做的项目中我们可以将上述所说的文件都存放在这个目录下。

src

在Vue.js项目中，src目录是非常核心的一个目录，它代表“source”或“源代码”。这个目录存放了项目所有的源代码文件和资源文件，基本上是你编写和管理的所有代码都位于此目录下。

assets目录

用于存储非代码的静态资源文件，如图片、字体文件、图标等。这些资源可以通过Webpack等打包工具处理并最终复制到构建目录中供应用使用。如图

在Vue组件中引用 src/assets 下的资源时，通常需要使用相对路径，并且在某些情况下（如图片或字体文件）可能需要借助Webpack的加载器（如url-loader或file-loader）来处理资源路径。

componenta目录

这是用来存放Vue组件的目录。这些组件是可重用的UI部分，可以包含模板、逻辑和样式。项目中除了主组件App.vue之外的所有组件通常都会放在这里。

App.vue

这是项目的主组件，也称为入口组件。它是所有其他组件的父组件，通常用来组织应用的总体结构。

main.js

这是项目的入口文件，是整个Vue应用的启动点。在这个文件中，你会看到Vue实例被创建，同时导入并使用其他必要的模块.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

createApp(App).mount('#app')这是用来创建和挂载根Vue应用的，这也是vue 3的新方法。('#app')就是我们入口文件中的id为app的元素。

.gitignore

这就是git的忽略文件列表。我们在平时上传我们的学习代码到git中通常会使用到，主要忽略我们我们项目中的依赖包等文件，因为这些文件不需要上传到git中。

index.html

这是我们的入口文件

package.json

这里面存储的是项目元数据和依赖项，相当于我们项目的一个说明书。元数据包括包括项目的名称(name)、版本号(version)、作者信息(author)、项目描述(description)、主页或文档链接(homepage、repository)等基本信息，便于他人了解和使用你的项目。

package-lock.json

这是npm基于当前package.json中指定的依赖关系生成的一个详细锁定文件。它记录了实际安装的每一个依赖包及其所有子依赖的确切版本号，形成了一个固定的依赖树结构。这确保了每次安装时，无论是在哪个环境中，都能获得完全相同的一套依赖版本，提高了项目构建的一致性和可复现性。可以说是说明书的说明书。

READER.md

这是我们文件的说明，我们可以在这里面记录我们项目的大致内容，让读者能够更快的了解我们的项目，我们也可以当做笔记来记录我们学到的知识点。

总结

我们在这里主要介绍了一下我们创建vue项目中的结构功能，能够让我们更快的上手vue。本文讲的只是个最基础的vue项目，我们在今后的开发中，大部分时间都在src这个目录下编写和修改代码，通过个各种组件结合成一个完整的项目。