• 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第四章 认识项目目录

    Î

    系列文章目录（点击查看）

    文章目录

    前言

    我们现在已经创建好项目的目录了，现在让我们来了解下项目的基本构成以及各个文件的作用。

    一、node_modules文件夹

    在 Vue 项目中，node_modules 文件夹包含了项目依赖的所有第三方模块和库。这些模块通常是通过npm（Node Package Manager）安装的，用于实现各种功能，包括但不限于前端框架、工具库、样式预处理器、构建工具等。node_modules 的存在使得开发人员能够方便地管理项目所需的各种模块和库，并且可以通过引用它们来扩展项目的功能。

    在这里插入图片描述
    我们也可以很方便的在这里看到一些插件库的源码。

    二、public文件夹

    在 Vue 项目中，public 文件夹用于存放不需要经过构建处理的静态资源。这些资源会直接复制到构建输出的根目录下。例如，你可以将不需要经过编译的图片、字体文件、以及各种不需要打包处理的静态文件放置在 public 文件夹中。这样做可以在构建过程中节省时间，因为这些资源不需要经过 vite、webpack等构建工具的处理，而是直接复制到最终的构建输出目录中。

    在这里插入图片描述

    三、src文件夹

    在Vue项目中，src文件夹是源代码文件夹，用于存放项目的源代码文件。通常，src文件夹包含项目的主要开发内容，包括但不限于以下内容：

    • 组件：Vue项目中的组件文件通常会存放在src文件夹中，这些组件用于构建页面和应用程序的各个部分。

    • 样式：包括CSS、Sass、Less等样式文件，负责定义项目的样式和布局。

    • JavaScript文件：包括Vue实例、路由配置、状态管理等各种JavaScript文件，用于实现项目的功能和交互逻辑。

    • 图片和其他静态资源：存放项目中使用的图片、字体文件以及其他静态资源。

    在这里插入图片描述

    四、.gitignore

    .gitignore 文件在 Vue 项目中的作用是指定哪些文件或目录在对项目进行版本控制时应该被忽略。这意味着这些被列出的文件或目录不会被添加到版本控制系统（如Git）中，也不会被提交到代码仓库中。在 Vue 项目中，.gitignore 文件通常用于忽略以下类型的文件和目录：

    • 临时文件：例如编译产生的临时文件、日志文件、以及运行时产生的临时文件。

    • 依赖管理文件：例如 node_modules 文件夹，这是由 npm 或者 Yarn 安装的依赖包所在的目录，通常会被列入 .gitignore 文件以忽略提交到代码库中。

    • 敏感信息：例如包含个人隐私信息的配置文件、API密钥等，在提交代码时通常需要被排除在外。

    在这里插入图片描述

    通过 .gitignore 文件，开发者可以避免向代码仓库提交不必要的、临时性的或者敏感的文件，使代码仓库保持整洁，减少不必要的提交和增加的存储空间占用。

    五、index.html

    在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

    在这里插入图片描述

    Vite 将 index.html 视为源码和模块图的一部分。Vite 解析