Vue是一套用于构建用户界面的渐进式 JavaScript 框架。

一、Vue框架是什么？

Vue是一套用于构建用户界面的渐进式 JavaScript 框架。

渐进式意味着你可以把 Vue 当作一个轻量的增强库引入现有页面，也可以用它配合路由（Vue Router控制页面切换）、状态管理（Pinia）、构建工具（Vite）等，搭建出复杂的大型单页应用（SPA）。

二、Vue的核心特点

• 响应式数据绑定

数据发生变化时，视图会自动更新。Vue 3 基于 Proxy 重构了响应式系统，性能更好，且能检测到对象属性的增删和数组索引变化。

• 组件化

将每个界面拆分为独立、可复用的 .vue 单文件组件，每个组件中包含模板（HTML）、逻辑（JavaScript）和样式（CSS），符合关注点分离但又在同一文件内聚合的开发体验。

• 声明式渲染与指令

在模板中使用类似 HTML 的语法，通过 v-bind、v-if、v-for、v-model 等指令，简洁地描述 UI 与数据的绑定关系，而不需要手写 DOM 操作。

• 双 API 风格

Vue 3 同时支持选项式 API（data、methods、computed 等选项）和组合式 API（setup 函数、ref、reactive 等），后者更利于逻辑复用和大型项目组织。

• TypeScript 支持

Vue 3 本身由 TypeScript 编写，对类型推断和 IDE 支持非常友好。

三、Vue的项目结构

执行npm install后会自动生成node_modules文件夹（用于存放项目依赖包，即 package.json 里声明的所有依赖）

1、public文件夹：存放不需要打包处理的静态资源（如 favicon.ico、robots.txt、全局图片等）这些文件会被直接复制到打包后的 dist 目录根下

引用方式：直接用 /文件名 访问，比如 /favicon.ico

2、src文件夹：存放项目源代码（存放项目的核心业务代码）

3、src/assets：项目的静态资源目录（会被 Vite 打包处理）如组件里用的图片、字体、样式文件

引用方式：用相对路径或 @/assets/xxx（需要在 vite.config.js 配置别名）

4、src/components：存放Vue组件（存放可复用的 Vue 组件）比如按钮、卡片、导航栏、弹窗等、也可按功能或模块划分，方便维护和复用

5、src/App.vue：Vue 项目的根组件，是整个应用的入口组件， 只会被 main.js 挂载一次，其他组件都在它内部渲染

6、src/main.js：项目的入口 JS 文件（Vite 构建的起点）

用途：创建 Vue 实例、挂载到 DOM；全局配置：注册组件、引入插件（如路由、状态管理、UI 库）、全局样式

7、src/style.css：存放全局样式，需要在 main.js 中引入，对所有组件生效

8、.gitignore：告诉Git哪些文件/文件夹不需要提交到仓库

9、index.html：项目的入口html文件（浏览器加载的第一个文件，Vite会以此为入口构建项目）

10、package.json：项目的配置文件（记录项目的基本信息：项目名称、版本号、描述、作者等） 声明项目依赖：dependencies（生产依赖，项目运行必需）和 devDependencies（开发依赖，仅开发构建用） 配置脚本命令：scripts 里的 dev、build、preview 等命令（比如 npm run dev 启动项目）

11、vite.config.js：Vite构建工具的配置文件

用途：配置 Vite 的构建行为：路径别名、代理服务器、构建优化、插件配置等。比如配置 @ 指向 src 目录、配置跨域代理、引入 Vue 插件等

扩展文件/文件夹：

src/views/：存放页面级组件（和 components/ 不同，views 是路由对应的页面，components 是页面里的复用组件）

src/router/：存放路由配置文件（index.js，配置页面路由）

src/api/：存放接口请求文件（按模块封装后端接口调用）

src/store/：存放状态管理文件（如 Pinia/Vuex，管理全局状态）

四、项目运行的核心流程

1. 执行 npm run dev → 调用 vite 命令，读取 vite.config.js 配置
2. Vite 找到入口 index.html
3. index.html 引入 src/main.js
4. main.js 创建 Vue 实例，挂载到 index.html 的 #app 节点
5. Vue 实例渲染根组件 App.vue，再渲染 App.vue 里的其他组件（如 components/ 里的组件）