创建应用实例函数
import { createApp } from 'vue'
const app = createApp({
/* 根组件选项 */
})
根组件
我们传入 createApp 的对象实际上是一个组件,每个应用都需要一个“根组件”,其他组件将作为其子组件。
如果你使用的是单文件组件,我们可以直接从另一个文件中导入根组件。`
import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'
const app = createApp(App)
挂载应用
应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数,可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串:
<div id="app"></div>
app.mount('#app')
应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意,不同于其他资源注册方法,它的返回值是根组件实例而非应用实例。
Vue中main.js、App.vue和index.html
main.js是项目的入口文件,定义了vue实例,并引入根组件app.vue,将其挂载到index.html中id为‘app’的节点上。
App.vue是主组件,所有页面都是在App.vue下进行切换,可以理解为所有的路由都是App.vue的子组件
index.html是页面的入口文件,里面包含一个id为app挂载点,main.js中定义的Vue根实例就会挂载到该挂载点上
打开网页的时候,页面Title是index.html中定义的Title,而正文部分是App.vue中定义的内容。但在打开的瞬间是会显示index.html里面的内容(如果定义了的话)
main.js入口文件
import Vue from 'vue'
import App from './App'
/* eslint-disable no-new */
new Vue({
el: '#app', //挂载点
components: { App }, // 根组件
template: '<App/>'
})
vue实例挂载后,会对节点原内容进行覆盖。所以,即便index.html和app.vue中都定义了<div id="app"></app>,
最终网页也不会出现两个id为app的节点。
index.html:页面的入口文件
<body>
<div id="app"></div>
</body>
app.vue 主组件,所有页面都是在App.vue下进行切换
<template>
<div id="app">
.....
</div>
</template>
组件注册
全局注册
我们可以使用 Vue 应用实例的 app.component()
方法,让组件在当前 Vue 应用中全局可用。
import { createApp } from 'vue'
const app = createApp({})
app.component(
// 注册的名字
'MyComponent',
// 组件的实现
{
/* ... */
}
)
如果使用单文件组件,你可以注册被导入的 .vue 文件:
import MyComponent from './App.vue'
app.component('MyComponent', MyComponent)
局部注册
局部注册的组件需要在使用它的父组件中显式导入,并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确,并且对 tree-shaking 更加友好。
局部注册需要使用 components 选项:
<script>
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
}
}
</script>
<template>
<ComponentA />
</template>