然后就去远行

Options 类型的 API，数据、方法、计算属性等，是分散在 data、methods、computed 中的，若想新增或者修改一个需求，就需要分别修改 data、methos、computed，不方便维护和复用；这里的编程风格为 OptionsAPI，name、data、methos 都是一个选项/配置项，我们在学习 vue2 就是在学习各种配置项，但是这种写法存在一些问题；，非个人所有，无意冒犯），非个人所有，无意冒犯）

下面开始写一个简单的效果，打开上一节使用的项目，在根目录的 src 文件夹下新建一个 components 文件夹（新建的默认文件夹中也可能默认带有 components 文件夹）;在 components 的 Person.vue 文件中的代码风格是 vue2 的，可以看到，在 vue3 项目中，是可以使用 vue2 代码构建项目并运行的；

App.vue 是一个 .vue 文件（与 main.ts 在同一个目录下），所以 App 是一个组件，相当于种花的根，以后我们写的 A.vue、B.vue 等 vue 组件都需要安装在 App 这个根上，我们写的组件相当于这花上的枝叶或者花；的意思是把花盆摆放在指定位置，这里是指把这个应用挂载到 id=app 的 div 容器中，这个容器在 index.html 中，也就是 index.html 中的。是把 App 传递给 createApp，用于创建一个应用，这个应用里所有组件的根组件；

可以看到 webpack 主要耗时在 route 分析和 module 分析，如果我们项目的路由和模块特别多，使用 webPack 构建会非常慢；第二个图是 vite 的构建流程，一开始就提示用户服务准备完毕，然后根据用户当前想跳转的 route 和 module 进行动态构建，用户当前没有观看的 route 和 module 不会马上构建（webPack 中是全部 route 和 module 构建完毕之后才提示 server ready），所以说 vite 可以实现极速的服务启动；