接着学习记录2，构建了基础Vue项目，先了解项目目录结构和其各部分介绍

Vue项目目录结构

使用vue-cli与使用vite构建的vue项目目录结构不尽相同，学习主要参考vite构建的

Vue项目目录结构：初始化项目时会构建两个文件夹public 和 src，然后进入项目内npm install构建项目具体使用的包仓库node_modules文件夹，类似如下目录结构

project-name/
├── node_modules/
├── public/
│   ├── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.js

node_modules/：存放项目的所有依赖包，由 npm 或 yarn 自动生成和管理

public/：静态文件目录，里面的文件不会被 Webpack 处理，最终会原样复制到打包目录下

比如public/favicon.ico：是网站的图标

src/：项目源代码目录，存放主要代码

src/assets/：存放静态资源，如图像、字体等

src/components/：存放 Vue 组件，每个组件都是一个独立的 .vue 文件

根据需求还可以有比如：

src/views/：存放视图组件，通常对应路由

src/router/：存放路由配置文件

src/App.vue：根组件，整个应用的入口组件

src/main.js：应用的入口文件，负责创建 Vue 实例并挂载到 DOM 上

项目相关配置信息文件

.gitignore：Git 忽略文件列表，指定哪些文件和目录不被包含在版本控制中（按需构建）

package.json：项目的依赖、脚本和其他元数据

README.md：项目的说明文件，通常用于描述项目、如何安装和使用等信息

index.html：应用的主 HTML 文件，默认自动访问这个页面

vite.config.js： Vite的配置文件，用于修改默认配置

编写前端Vue代码通常在src内，构建相应的组件.vue文件

本人按照Java后端项目框架理解：Vue 相似于 Spring

src/ 目录类似于 Java 的 src/ 目录，存放源代码；

src/components/ 目录类似于 Java 的类文件组织，按功能划分组件；

每个.vue组件文件相当于java编写的每个.java类文件；

npm 或 yarn 类似于 Maven 或 Gradle，用于管理项目依赖；

Vue 组件化 类似于 Java 的面向对象设计，强调模块化