• 介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。

• create-vue提供了如下功能：

  • 统一的目录结构

  • 本地调试

  • 热部署

  • 单元测试

  • 集成打包上线

• 而要想使用create-vue来创建vue项目，则必须安装依赖环境：NodeJS

1. Vue项目开发流程

    1.    访问入口
    •    浏览器访问 localhost:5173，实际加载的是 Vue 项目的默认首页 index.html。
    2.    加载入口 JS
    •    index.html 中引入了 src/main.js，它是 整个 Vue 项目的入口文件。
    3.    创建 Vue 应用
    •    在 main.js 中创建了一个 Vue 应用实例。
    •    并指定该应用接管页面中 id="app" 的 DOM 区域。
    4.    根组件的作用
    •    创建应用时传入了一个根组件 App。
    •    这个 App 来自 src/App.vue，它是 整个应用的根组件。
    5.    页面最终呈现内容
    •    浏览器最终看到的页面内容，本质上都是由 App.vue 及其子组件渲染出来的。
    6.    单文件组件（SFC）
    •    App.vue 是一个单文件组件（SFC）。
    •    将 模板（HTML）+ 逻辑（JS）+ 样式（CSS） 封装在一个文件中，提高了组件的可维护性和复用性。

⸻

index.html 是壳，main.js 是入口，App.vue 是根，页面内容最终由根组件及其子组件决定。

当我们打开浏览器去访问localhost的5173到时候最终访问的页面其实是vue项目当中的默认首页是这个index.html，而在当中又引入了一个js是src下的man.js这个js其实他是我们vue 项目的入口文件然后在这js 个当中当中他去创建了一个vue 的应用实例然后指定当前的vue应用实例要接管的区域是#App 这个区域也就是说创建出来的应用实例ID为App这个区域接管的上面div 区域那最终要呈现什么样的内容？在入口文件当中在创建应用实例的时候，这里面又传递了这么一个根组件进来，就是这个App这个App引入的是SRC目录下的这个app.vue这个组件我们称为根组件，所以最终在欢迎页面当中所看到的页面呈现出来的内容都是在这个当中定义，他又称为单文件组件，他指的是将一个组件的逻辑js模板html和样式css统一的封装在这个文件当中提高复用性

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

等价于：

const app = createApp(App)
app.mount('#app')
创建一个 Vue 应用实例，用 App 作为根组件，并把它渲染到页面中 id="app" 的 DOM 节点上。

二、createApp(App) 在干什么？

1️⃣ createApp 是什么？
    •    Vue3 提供的 工厂函数
    •    用来 创建一个 Vue 应用实例

import { createApp } from 'vue'

📌 注意：
    •    Vue3 不再有 new Vue()
    •    每一个 Vue 应用都必须通过 createApp 创建

2️⃣ App 是什么？

import App from './App.vue'

    •    App 是一个 组件对象
    •    来自 App.vue
    •    它是：
整个应用的根组件（组件树的根）

📌 意味着：
    •    页面渲染 从 App.vue 开始
    •    其它组件都是它的“子孙”

3️⃣ createApp(App) 的结果是什么？

👉 返回一个 Vue 应用实例

这个实例里会保存：
    •    根组件是谁（App）
    •    全局配置
    •    全局组件 / 插件 / 指令
    •    应用生命周期

你可以理解成：

Vue 的“应用容器”

createApp(App) 相当于创建 IOC 容器
mount('#app') 相当于容器启动并开始对外服务
 

createApp(App)  → 创建应用（根组件是 App）
mount('#app')   → 挂载到 DOM（接管页面）

vue与Springboot对比

启动流程一一对应（流程图）

Vue 启动流程

浏览器访问
   ↓
index.html
   ↓
main.js
   ↓
createApp(App)
   ↓
mount('#app')
   ↓
组件渲染

Spring

Spring Boot 启动流程

执行 main 方法
   ↓
SpringApplication.run()
   ↓
创建 ApplicationContext
   ↓
启动内嵌 Tomcat
   ↓
加载 Bean
   ↓
监听端口，提供接口

Vue 是前端的 IOC 容器，
Spring Boot 是后端的 IOC 容器。

维度	Vue	Spring Boot
运行位置	浏览器	服务器
管理对象	组件	Bean
输出结果	页面	HTTP 接口
生命周期	页面级	应用级
容器	虚拟 DOM	IOC 容器

为什么默认首页是Index 不是main 不是从它开始启动的吗

一句话结论（先记住）

index.html 是浏览器的入口，
main.js 是 Vue 应用的入口。

两个“入口”服务于两个不同的世界。

⸻

一、为什么浏览器一定先找 index.html？

1️⃣ 浏览器的规则（不是 Vue 决定的）

当你访问：

http://localhost:5173

浏览器会做一件事：

向服务器请求一个 HTML 文件

在 Web 世界里：
    •    浏览器 只能从 HTML 开始
    •    它不认识 main.js
    •    也不可能“直接执行 JS 应用”

📌 所以：
    •    HTML 是 Web 的起点
    •    默认文件名就是 index.html

⸻

2️⃣ 为什么叫 index.html？

这是 Web 的历史约定：

/
├── index.html   ← 默认首页
├── about.html
├── login.html

当访问 / 时：
    •    服务器自动返回 index.html
    •    不需要你写文件名

⚠️ 这和 Vue、React、Spring 完全无关

⸻

二、那 main.js 到底“启动”了什么？

关键点来了 👇

main.js 不是“网站启动”，
而是“Vue 应用启动”

⸻

实际加载顺序（真实发生的事）

浏览器访问 /
   ↓
服务器返回 index.html
   ↓
浏览器解析 HTML
   ↓
遇到 <script src="/src/main.js">
   ↓
浏览器下载并执行 main.js
   ↓
Vue 应用启动

📌 main.js 是被 index.html 调用的，而不是反过来

⸻

三、为什么不能用 main.js 当首页？

从浏览器角度看：

❌ 这样是行不通的：

http://localhost:5173/main.js

因为：
    •    浏览器会把它当成一个 JS 文件
    •    而不是一个 页面
    •    页面需要 HTML 来描述结构

👉 JS 不能独立作为页面的起点

⸻

四、类比 Spring Boot（一下就通）

Spring Boot（后端）

java -jar app.jar
   ↓
main 方法
   ↓
Spring 启动

👉 JVM 认识 main 方法

⸻

Vue（前端）

浏览器访问 URL
   ↓
index.html
   ↓
script 加载 main.js
   ↓
Vue 启动

👉 浏览器只认识 HTML，不认识 main.js

⸻

五、为什么说 main.js 仍然是“入口文件”？

因为在 Vue 的世界里：
    •    所有组件
    •    所有配置
    •    所有插件

都是 从 main.js 开始被组织起来的

所以：

层级    入口
浏览器 / Web    index.html
Vue 应用    main.js

📌 入口是分层的，不是唯一的

⸻

六、用一句“底层视角”的话总结

index.html 是操作系统层面的入口，
main.js 是应用层面的入口。

（虽然浏览器不是 OS，但逻辑一模一样）

最终记忆版（背）

先有 index.html
再有 main.js
HTML 启动浏览器
JS 启动 Vue

vue的API风格

• Vue的组件有两种不同的风格：组合式API 和 选项式API

• 组合式API：是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件。代码形式如下：

• setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。

• ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。

• onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

选项式API

选项式API：可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。选项定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

在Vue中的组合式API使用时，是没有this对象的，this对象是undefined。

在组合式API中，如果要更新响应式的数据的内容一定要通过   .vlue属性来获取到响应式对象里面分装的内部的值