初始化项目

创建项目

通过pnpm create vue@3

创建应用实例与挂载

创建实例

通过createApp()创建应用实例

    import { createApp } from 'vue'

    const app = createApp({
      
    })

挂载实例

说明

通过.mount()挂载, 接受一个实际DOM元素或者css选择器作为参数

...
<div id="app"></div>
...
app.mount('#app')

类型

interface App {
  mount(rootContainer: Element | string): ComponentPublicInstance
}

参数：实际DOM元素或者CSS选择器(第一个匹配的元素),返回根组件的实例

注册组件

说明

通过.component()方法注册组件

EG

app.component('CustomButton', CustomButton)

类型

    interface App {
      component(name: string): Component | undefined
      component(name: string, component: Component): this
    }

参数说明

1、只传递一个组件名字符串，则返回用该名字注册的组件 | undefined 2、传递组件名及其定义，则注册一个全局组件

全局挂载变量

获取组件实例和全局实例

通过getCurrentInstance方法获取

ts
<script lang="ts" setup>
import { getCurrentInstance } from 'vue'

// proxy: 当前组件实例，可以理解为组件级别的 this，没有全局的、路由、状态管理之类的
const { proxy, appContext } = getCurrentInstance()

// 这个 global 就是全局实例
const global = appContext.config.globalProperties
</script>

挂载全局变量

在main.ts中通过app.config.globalProperties.[valueName] = value实现

ts

// 添加全局属性 
app.config.globalProperties.loading = false

使用：

通过getCurrentInstance方法获取全局实例后，然后通过.[valueName]取值

ts
<script lang="ts" setup>
import { getCurrentInstance } from 'vue'

// proxy: 当前组件实例，可以理解为组件级别的 this，没有全局的、路由、状态管理之类的
const { proxy, appContext } = getCurrentInstance()

// global: 全局实例
const global = appContext.config.globalProperties

const loadingType = global.loading
</script>