Vue3 入口文件createApp函数

最新推荐文章于 2024-05-13 15:45:36 发布

＊且听风吟

最新推荐文章于 2024-05-13 15:45:36 发布

阅读量7.8k

点赞数 3

分类专栏： # Vue 3 文章标签：前端

本文链接：https://blog.csdn.net/HH18700418030/article/details/123925901

版权

在2.x中，main.js是vue项目的入口文件，引入构造函数Vue，然后new Vue传入配置项生成vm实例，如下：

import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"

new Vue({
   
    router,
    store,
    render: h => h(App) 
})

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

＊且听风吟

关注关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
Vue3 入口文件createApp函数

Vue3 通过使用 createApp 函数来创建应用。
复制链接

扫一扫

专栏目录

初识vue3一

qq_50563868的博客

05-08

1459

//main.js入口文件 import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) console.log(app); app.mount('#app') // setTimeout(() => { // app.unmount('#app') // }, 1000);  <template> <div&g

vue3源码之createApp

欠踹的背影

04-28

1785

看懂Vue3底层源码实现逻辑，从createApp()开始

2 条评论您还未登录，请先登录后发表或查看评论

Vue基础笔记

weixin_68915174的博客

11-16

7477

每个Vue应用都是通过createApp函数创建一个新的应用实例const app = createApp({ //根组件选项})

第一节: 全面细致的理解创建vue3应用的 createApp函数

我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！

05-10

2128

相信大家已经比较熟了, 就是父组件给子组件传参的方式. 问题在于根组件已经是顶级组件了, 没有父组件传入。类型, 可以查看源码. 我们可以通过在控制台输出的方式, 查看返回的应用对象都具有哪些属性.参数, 可以是一个真实DOM元素, 也可以是一个选择器字符串。模板是需要编译成渲染函数, 通过调用渲染函数, 获取返回的。的第一个参数除了可以是单文件组件, 也可以是选项对象。选项, 直接编写渲染函数, 渲染函数需要返回。函数的第一个参数, 接下来我们分析第二个参数。函数接受两个参数, 第二个参数是可选地,

Vue3源码之createApp

热门推荐

玉案轩窗的博客

07-13

1万+

前言 Vue3版本源码架构与Vue2版本存在非常大的不同，从使用方式的角度来讲，对它们可以简单概括为： Vue2版本是命令方式使用，通过new Vue去创建Vue实例，组件中使用选项组合代码逻辑 Vue3版本将命令和功能API函数化，通过createApp去创建应用实例，组件中通过组合式API和选项组合代码这里需要区分与Vue2中的一些概念，Vue2中Vue实例实际上就是组件实例，而Vue3中createApp则是创建一个上下文，称之为应用实例。组件实例是通过其他方式来获得的，例如Vue3中mount

Vue3源码学习笔记—— Vue.createApp(App) 和 app.mount(“#app“)（一）

weixin_53335381的博客

08-10

2793

本篇文章为 Vue.createApp(App) 和 app.mount("#app") 的阅读准备。

基本认识vue3

在路上`的博客

03-23

963

vue3 的基本认识

create-vue-app

03-26

由于 `create-vue-app` 是基于 JavaScript 的，所以了解 JavaScript 基础和 ES6+ 的特性至关重要，包括箭头函数、模板字符串、解构赋值、类和模块导入等。同时，熟悉 Vue.js 的核心概念，如组件系统、指令、计算属性...

vue3 -----视频讲解

09-23

9. 全局API的变化：Vue3 为了保持简洁，移除了一些全局API，如Vue.extend和Vue.component，同时引入了createApp作为新的应用入口，鼓励使用Composition API。 10. 性能提升：Vue3 使用了最新的JavaScript语法特性，...

前端-Vue3.x-知识图谱

02-19

2. **Global API的重构**：Vue3对全局API进行了重构，如`Vue.extend`替换为`createApp`，`Vue.component`替换为`app.component`等，使得API更简洁、直观。总之，“前端-Vue3.x-知识图谱”涵盖了Vue3.x的主要更新和...

vue3初始化项目 sass vite ts

08-01

2. **index.html**：项目入口文件，通常包含Vue的挂载点`<div id="app"></div>`。 3. **package-lock.json**：记录了所有依赖包的确切版本，确保团队成员在安装依赖时使用相同的版本。 4. **tsconfig.json**：...

使用vue3+element-ui plus 快速构建后台管理模板

10-17

import { createApp } from 'vue'; import App from './App.vue'; import { ElButton } from 'element-plus'; createApp(App).component(ElButton.name, ElButton).mount('#app'); ``` 为了快速构建后台管理模板，...

vue3的中的createApp方法是如下：

h_t_d的博客

10-25

503

方法是Vue 3中用于创建应用程序实例的入口函数，它接受一个根组件选项对象作为参数，并返回一个应用程序实例。通过这个方法，我们可以启动Vue应用程序，并进行全局配置和注册组件、指令等操作。方法，我们可以创建一个根组件实例，并将其挂载到DOM元素上，从而启动Vue应用程序。这个方法接受一个根组件选项对象作为参数，并返回一个应用程序实例。等，可以用于注册全局组件、指令和插件。同时，应用程序实例还提供了一些全局配置选项，比如。方法创建的应用程序实例具有一些常用的方法，比如。，可以用于配置Vue应用程序的行为。

Vue开发相关

dap769815768的博客

07-07

349

vue cli 版本：Vue CLI v4.5.13 1.使用Vue Cli创建项目。使用vs code打开一个空文件夹，在该目录下执行命令： # 我习惯安装到本地，如果想全局安装使用-g npm install @vue/cli --dev-save 安装好后，当前目录下会出现一个node_modules目录，然后使用命令创建一个项目，项目名称为big-screen： .\node_modules\.bin\vue create big-screen 使用该命令后会出现下面的创建步骤，选

在VUE3中调用 createApp 时，Vue 为我们做了那些工作？

LuckyWinty的博客

02-23

1175

前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群在使用Vue3时，我们需要使用createApp来创建一个应用实例，然后使用mount方法将应用挂载到某个DOM节点上。那么在调用createApp时，Vue再背后做了些什么事情呢？今天就来扒一扒Vue3的源码，看看调用createA...

Vue3项目main.js中的createApp(App).mount(‘#app‘)

最新发布

听海边涛声

05-13

421

Vue3项目main.js中的createApp(App).mount('#app')

学会vue3,仅需这一篇

2301_76866366的博客

07-04

318

V3-组合式API,使用create-vue搭建Vue3项目,生命周期,父子通信,vue3生态-router(路

vue3 新特性总结

暖光的博客

12-21

353

Vue2 到 Vue3 最直观的改变就是 Composition API——几乎所有的 Vue2 options 方法都被放到了 setup 函数里。就是从基于对象的编程（OOP）转向了函数式编程（FP）。创建方式首先创建方式发生了改变 import { createApp } from "vue"; createApp(App) Teleport 可以改变它包含的html渲染的节点位置，例如：下边的div将会渲染到body下边 <teleport to="body"> &lt.

vue2与vue3对比

WANG944282的博客

04-17

2452

创建实例 vue2 ：引入vue构造函数，主要依靠render( (creatElement) => {})创建app实例对象 //引入vue import Vue from 'vue' //引入App import App from './App.vue' //创建vm new Vue({ el:'#app', render: *h* *=>* h(App), router:router })//.$mount('#app') vue3：按需引入，直接用引入的creat

vue3 调用 pinia 的函数

08-02

在Vue3中调用Pinia的函数可以按照以下步骤进行： 1. 首先，在项目的入口文件（通常是`main.ts`）中，使用`createPinia`函数创建一个Pinia实例，并将其挂载到Vue应用上。例如： ```javascript import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; const pinia = createPinia(); const app = createApp(App); app.use(pinia); app.mount('#app'); ``` 2. 在需要使用Pinia的组件中，可以使用`useStore`函数来获取Pinia的仓库实例。例如： ```javascript import { useStore } from 'pinia'; export default { setup() { const store = useStore(); // 在这里可以使用store中定义的state、getter和action // 例如： console.log(store.msg); // 访问state中的msg属性 store.fn(); // 调用action中的fn函数 return { store, }; }, }; ``` 这样就可以在Vue3中调用Pinia的函数了。通过`useStore`函数获取到的仓库实例可以直接访问和调用仓库中定义的state、getter和action。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交