一、【Vue3】——工程结构分析&初识setup

本文链接：https://blog.youkuaiyun.com/yifei1234567/article/details/123790087

本文对比Vue2和Vue3在main.js及App.vue中的差异，Vue3采用工厂函数实现按需引入，App.vue中setup成为Composition API的核心，组件模板可无根标签，数据和方法统一在setup中管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：学习Vue3之前首先要知道Vue3与Vue2工程结构的区别，才方便更好的理解Vue3。其实整体上区别不大，主要浅谈一下main.js和App.vue对应vue文件的区别。

一、main.js区别

Vue3引用的是createApp工厂函数，而不是Vue2中的整个Vue构造函数。这样做实现了按需引入，工厂函数也可以直接创建应用实例对象app；
引入App组件，它是所有组件的父组件。与Vu2中一致；
创建应用实例对象app并挂载（app类似Vue2中的vm，但比vm更轻盈）；

Vue3中main.js代码展示

// 一：引入createApp工厂函数
import { createApp } from 'vue'
// 二：引入App组件
import App from './App.vue'
// 三：创建应用实例对象app并挂载（app类似vm，但比vm更轻盈）
// createApp(App).mount('#app')
// 或者
const app = createApp(App)
app.mount('#app')

作者：YIFEI
链接：https://juejin.cn/post/7078591074188394526
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。