04~vue入口文件main.js分析

最新推荐文章于 2024-08-22 16:04:37 发布

俗世凡人行

最新推荐文章于 2024-08-22 16:04:37 发布

阅读量118

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41887155/article/details/132747875

版权

vue3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文分析了Vue项目中，如何在main.js中通过`createApp`引入并挂载App.vue作为根组件，以及组件实例的相关特性和使用。重点讲解了`App.vue`的作用和`mount`方法在挂载过程中的作用。

摘要由CSDN通过智能技术生成

vue入口文件main.js分析

Vue的根组件

src里面的App.vue组件, 提到App.vue组件, 第一时间就是想到它是根组件

入口文件main.js

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
// 引入了App组件

createApp(App).mount('#app')
/**
 * src/App.vue  根组件
 * 
 * createApp 的选项 'App' 用于配置根组件, Vue中, App.vue就是根组件, 当我们挂载应用时,
 * 根组件被用作渲染的起点
 * 
 * .mount('#app')  把根目录挂载到index.html的 `<div id="app"></div>`， 因为一个应用需
 * 要被挂载到一个DOM元素中
 * 
 * 与大多数方法不同的是， mount 不反回应用本身； 相反， 它返回的是跟组件实例。
 * 
 * 组件实例的所有属性（property）, 无论如果定义， 都可以在组件的模板中访问。
 * 
 * Vue通过组件实例暴露了一些内置 property， 如 `$attrs`和`$emit`, 这些property都有一个
 * `$`前缀， 以避免与用户定义的 property 名冲突。
 */