Vue项目目录结构全解析
概况
规范的 Vue 项目采用清晰的目录结构划分，能够有效提升代码可维护性和团队协作效率。以下基于 Vite 创建的现代 Vue 项目，介绍其核心目录结构：
核心目录与文件详解
node_modules目录
存储项目所有依赖包
由
npm install或yarn install自动生成通常无需手动修改，也不建议提交到 Git 仓库
public 目录
存放未经打包处理的静态资源
内容会被直接复制到最终构建输出目录
典型文件：
favicon.ico：网站图标
src 目录
这是开发工作的主战场，所有的源代码都位于此目录下。
1. 入口文件
main.ts：应用入口，初始化 Vue 实例，加载全局插件和配置，并将根组件App.vue挂载到index.html上；App.vue：应用顶层组件，其他所有页面和组件都将作为其子组件被渲染。
2. 组件目录
components/：存储可复用通用组件（如按钮、弹窗等）；设计原则：保持组件独立性和业务无关性。
3. 资源目录
assets/：存放项目所需的静态资源，如图片、字体、全局样式等；这些文件会经过 Webpack 处理（如添加文件指纹）。
根目录文件
根目录主要存放项目的配置文件和一些文档，它们定义了项目的运行环境和规范。
index.html:项目的单页面入口文件。Vue 应用最终会挂载到这个文件中的某个 DOM 元素上（通常是id="app"的div）。package.json:记录了项目的依赖包、版本信息以及可执行的脚本命令（如npm run dev）。.gitignore:配置在git提交时需要忽略的文件或文件夹（如node_modules），避免不必要的文件进入版本库。tsconfig.json/:TypeScript 项目的配置文件，定义了 TypeScript 编译器如何将 TypeScript 代码编译成 JavaScript 代码。
vue.config.ts:VITE的自定义配置文件，用于对 Webpack 构建工具进行深度配置。
核心概念总结
- 单页应用：所有交互都在index.html这一单页面里形成；
- 应用实例：通过createApp函数创建一个应用实例，在这个实例中构建各种应用（main.ts）；
- 组件系统：每个vue文件就是一个页面上的组件，组件可以嵌套使用；
- vue文件标准结构：<script>脚本、<template>模板、<style>样式。