appkit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Reown AppKit — Web Integration

Reown AppKit — Web 集成指南

Goal

目标

Help developers integrate Reown AppKit so their users can connect wallets, switch networks, and interact with EVM, Solana, and Bitcoin blockchains. AppKit provides a universal modal UI and hooks/composables for wallet management.

帮助开发者集成Reown AppKit，让用户能够连接钱包、切换网络，并与EVM、Solana和Bitcoin区块链进行交互。AppKit提供了通用的模态框UI以及用于钱包管理的钩子函数/组合式函数。

When to use

适用场景

Adding wallet connection to a web app (React, Next.js, Vue, Nuxt, Svelte, JavaScript)
Setting up multi-chain support (EVM + Solana + Bitcoin)
Configuring blockchain adapters (Wagmi, Ethers, Solana, Bitcoin)
Debugging AppKit initialization, modal, or connection issues
Implementing Sign In With X (SIWX) authentication
Choosing the right adapter for a project

为Web应用添加钱包连接功能（React、Next.js、Vue、Nuxt、Svelte、JavaScript）
搭建多链支持（EVM + Solana + Bitcoin）
配置区块链适配器（Wagmi、Ethers、Solana、Bitcoin）
调试AppKit初始化、模态框或连接问题
实现Sign In With X (SIWX) 认证
为项目选择合适的适配器

When not to use

不适用场景

Building native mobile apps (use AppKit mobile SDKs — separate product)
WalletKit integration for wallet developers (separate SDK)
WalletConnect Pay (use the walletconnect-pay skill)

构建原生移动应用（请使用AppKit移动SDK——独立产品）
钱包开发者的WalletKit集成（使用独立SDK）
WalletConnect Pay（请使用walletconnect-pay技能）

Supported Platforms & Adapters

支持的平台与适配器

Frameworks: React, Next.js, Vue, Nuxt, Svelte, vanilla JavaScript Adapters: Wagmi (EVM), Ethers v5/v6 (EVM), Solana, Bitcoin Networks: All EVM chains, Solana, Bitcoin

框架： React、Next.js、Vue、Nuxt、Svelte、原生JavaScript 适配器： Wagmi（EVM）、Ethers v5/v6（EVM）、Solana、Bitcoin 网络： 所有EVM链、Solana、Bitcoin

Choose Your Framework

选择你的框架

Framework	Import path	Notes
React	`@reown/appkit/react`	Hooks-based
Next.js	`@reown/appkit/react`	SSR + cookie hydration required
Vue	`@reown/appkit/vue`	Composables-based
Nuxt	`@reown/appkit/vue`	SSR + module config required
Svelte	`@reown/appkit`	Stores-based
JavaScript	`@reown/appkit`	No framework dependency

Jump to the right reference:

React + Wagmi
React + Ethers
React + Solana
React + Bitcoin
React + Multichain
Next.js + Wagmi
Next.js + Ethers
Next.js + Solana
Next.js + Multichain
Vue + Wagmi
Vue + Ethers
Vue + Solana
Vue + Multichain
Nuxt + Wagmi
Svelte + Wagmi
JavaScript + Wagmi
JavaScript + Ethers
JavaScript + Solana
JavaScript + Multichain

框架	导入路径	说明
React	`@reown/appkit/react`	基于钩子函数
Next.js	`@reown/appkit/react`	需要SSR + Cookie水合
Vue	`@reown/appkit/vue`	基于组合式函数
Nuxt	`@reown/appkit/vue`	需要SSR + 模块配置
Svelte	`@reown/appkit`	基于状态存储
JavaScript	`@reown/appkit`	无框架依赖

跳转到对应的参考文档：

React + Wagmi
React + Ethers
React + Solana
React + Bitcoin
React + Multichain
Next.js + Wagmi
Next.js + Ethers
Next.js + Solana
Next.js + Multichain
Vue + Wagmi
Vue + Ethers
Vue + Solana
Vue + Multichain
Nuxt + Wagmi
Svelte + Wagmi
JavaScript + Wagmi
JavaScript + Ethers
JavaScript + Solana
JavaScript + Multichain

Prerequisites

前置条件

Project ID — The examples use
```
b56e18d47c72ab683b10814fe9495694
```
, a public projectId for localhost testing only. For production, create your own project at dashboard.reown.com
Node 18+ and a modern bundler (Vite recommended)
Choose an adapter based on your chain requirements

项目ID — 示例中使用的
```
b56e18d47c72ab683b10814fe9495694
```
是仅用于本地测试的公共项目ID。生产环境请在dashboard.reown.com创建自己的项目
Node 18+ 和现代打包工具（推荐Vite）
根据你的链需求选择适配器

Universal Setup Flow (all frameworks)

通用设置流程（所有框架）

Every integration follows these steps:

1. Install packages (appkit + adapter)
        ↓
2. Configure adapter (projectId, networks)
        ↓
3. Call createAppKit({ adapters, networks, projectId, metadata })
        ↓
4. Wrap app with required providers (framework-specific)
        ↓
5. Add <appkit-button /> or use hooks/composables to open modal
        ↓
6. Use hooks/composables for account, network, and provider access
        ↓
7. Add your domain at [dashboard.reown.com](https://dashboard.reown.com)

所有集成都遵循以下步骤：

1. 安装包（appkit + 适配器）
        ↓
2. 配置适配器（projectId、网络）
        ↓
3. 调用createAppKit({ adapters, networks, projectId, metadata })
        ↓
4. 用所需的提供者包裹应用（框架特定）
        ↓
5. 添加<appkit-button />或使用钩子/组合式函数打开模态框
        ↓
6. 使用钩子/组合式函数访问账户、网络和提供者
        ↓
7. 在[dashboard.reown.com](https://dashboard.reown.com)添加你的域名

Step 1 — Install packages

步骤1 — 安装包

Always install

@reown/appkit

plus the adapter for your chain:

bash

undefined

请始终安装

@reown/appkit

以及对应链的适配器：

bash

undefined

EVM with Wagmi (most common)

EVM + Wagmi（最常用）

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query

EVM with Ethers v6

EVM + Ethers v6

npm install @reown/appkit @reown/appkit-adapter-ethers ethers

Solana

npm install @reown/appkit @reown/appkit-adapter-solana

Bitcoin

npm install @reown/appkit @reown/appkit-adapter-bitcoin

undefined

npm install @reown/appkit @reown/appkit-adapter-bitcoin

undefined

Step 2 — Configure and create AppKit

步骤2 — 配置并创建AppKit

typescript

import { createAppKit } from '@reown/appkit/react' // or /vue or just @reown/appkit
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { mainnet, arbitrum } from '@reown/appkit/networks'

const projectId = 'b56e18d47c72ab683b10814fe9495694' // Public projectId for localhost only
const networks = [mainnet, arbitrum]

const wagmiAdapter = new WagmiAdapter({
  networks,
  projectId,
})

const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks,
  projectId,
  metadata: {
    name: 'My App',
    description: 'My App Description',
    url: 'https://myapp.com',      // Must match your domain
    icons: ['https://myapp.com/icon.png']
  },
  features: {
    analytics: true
  }
})

typescript

import { createAppKit } from '@reown/appkit/react' // 或 /vue 或直接 @reown/appkit
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { mainnet, arbitrum } from '@reown/appkit/networks'

const projectId = 'b56e18d47c72ab683b10814fe9495694' // 仅用于本地测试的公共项目ID
const networks = [mainnet, arbitrum]

const wagmiAdapter = new WagmiAdapter({
  networks,
  projectId,
})

const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks,
  projectId,
  metadata: {
    name: 'My App',
    description: 'My App Description',
    url: 'https://myapp.com',      // 必须与你的域名匹配
    icons: ['https://myapp.com/icon.png']
  },
  features: {
    analytics: true
  }
})

Step 3 — Trigger the modal

步骤3 — 触发模态框

tsx

// Web component (works everywhere)
<appkit-button />

// React hook
import { useAppKit } from '@reown/appkit/react'
const { open } = useAppKit()
<button onClick={() => open()}>Connect</button>

// Vue composable
import { useAppKit } from '@reown/appkit/vue'
const { open } = useAppKit()

tsx

// Web组件（适用于所有框架）
<appkit-button />

// React钩子
import { useAppKit } from '@reown/appkit/react'
const { open } = useAppKit()
<button onClick={() => open()}>连接钱包</button>

// Vue组合式函数
import { useAppKit } from '@reown/appkit/vue'
const { open } = useAppKit()

Step 4 — Access account and network

步骤4 — 访问账户和网络

tsx

// React
import { useAppKitAccount, useAppKitNetwork } from '@reown/appkit/react'

const { address, isConnected, caipAddress } = useAppKitAccount()
const { caipNetwork, switchNetwork } = useAppKitNetwork()

tsx

// React
import { useAppKitAccount, useAppKitNetwork } from '@reown/appkit/react'

const { address, isConnected, caipAddress } = useAppKitAccount()
const { caipNetwork, switchNetwork } = useAppKitNetwork()

Key Hooks / Composables

核心钩子/组合式函数

Hook	Returns	Purpose
`useAppKit`	`open()` , `close()`	Control modal
`useAppKitAccount`	`address` , `isConnected` , `caipAddress` , `status`	Account state
`useAppKitNetwork`	`caipNetwork` , `chainId` , `switchNetwork()`	Network state
`useAppKitProvider`	`walletProvider`	Raw provider access
`useAppKitState`	`initialized` , `loading` , `open` , `selectedNetworkId`	Modal state
`useDisconnect`	`disconnect()`	Disconnect wallet
`useAppKitBalance`	`fetchBalance()`	Token balance
`useWalletInfo`	`walletInfo`	Wallet metadata

钩子函数	返回值	用途
`useAppKit`	`open()` , `close()`	控制模态框
`useAppKitAccount`	`address` , `isConnected` , `caipAddress` , `status`	账户状态
`useAppKitNetwork`	`caipNetwork` , `chainId` , `switchNetwork()`	网络状态
`useAppKitProvider`	`walletProvider`	原始提供者访问
`useAppKitState`	`initialized` , `loading` , `open` , `selectedNetworkId`	模态框状态
`useDisconnect`	`disconnect()`	断开钱包连接
`useAppKitBalance`	`fetchBalance()`	代币余额
`useWalletInfo`	`walletInfo`	钱包元数据

Best Practices

最佳实践

1. Keep all AppKit package versions aligned

1. 保持所有AppKit包版本一致

All

@reown/appkit*

packages must be the same version. Mixing versions causes subtle runtime errors (missing methods, broken state, silent failures).

json

// package.json — correct: all versions match
{
  "@reown/appkit": "1.7.1",
  "@reown/appkit-adapter-wagmi": "1.7.1",
  "@reown/appkit-adapter-solana": "1.7.1"
}

When upgrading, update every

@reown/appkit*

package together.

所有

@reown/appkit*

包必须使用相同版本。混合版本会导致难以察觉的运行时错误（方法缺失、状态异常、静默失败）。

json

// package.json — 正确示例：所有版本一致
{
  "@reown/appkit": "1.7.1",
  "@reown/appkit-adapter-wagmi": "1.7.1",
  "@reown/appkit-adapter-solana": "1.7.1"
}

升级时，请同时更新所有

@reown/appkit*

包。

2. Call

createAppKit

at module level — never inside a component

2. 在模块级别调用

createAppKit

— 切勿在组件内部调用

createAppKit

must run once as a side-effect at module scope. Calling it inside a React component, Vue

setup()

, or Svelte component causes duplicate instances and broken state on re-renders.

typescript

// DO — module-level (runs once on import)
import { createAppKit } from '@reown/appkit/react'
import { wagmiAdapter, projectId, networks, metadata } from './config'

createAppKit({ adapters: [wagmiAdapter], networks, projectId, metadata })

export default function App() {
  return <appkit-button />
}

typescript

// DON'T — inside a component (runs on every render)
export default function App() {
  createAppKit({ adapters: [wagmiAdapter], networks, projectId, metadata }) // BUG
  return <appkit-button />
}

createAppKit

必须作为副作用在模块作用域仅运行一次。在React组件、Vue

setup()

或Svelte组件内部调用会导致重复实例化，以及重渲染时的状态异常。

typescript

// 正确做法 — 模块级别（导入时仅运行一次）
import { createAppKit } from '@reown/appkit/react'
import { wagmiAdapter, projectId, networks, metadata } from './config'

createAppKit({ adapters: [wagmiAdapter], networks, projectId, metadata })

export default function App() {
  return <appkit-button />
}

typescript

// 错误做法 — 在组件内部调用（每次渲染都会运行）
export default function App() {
  createAppKit({ adapters: [wagmiAdapter], networks, projectId, metadata }) // 错误
  return <appkit-button />
}

3. Wagmi OR Ethers — never both

3. Wagmi或Ethers — 切勿同时使用

Both

WagmiAdapter

and

EthersAdapter

eip155

) namespace. Using both in the same project causes conflicts.

New projects: use Wagmi — better React hook integration, active ecosystem, broader wallet support
Existing ethers.js codebase: use Ethers to avoid rewriting provider logic

typescript

// DO — one EVM adapter
createAppKit({ adapters: [wagmiAdapter, solanaAdapter], ... })

// DON'T — two EVM adapters
createAppKit({ adapters: [wagmiAdapter, ethersAdapter], ... }) // CONFLICT

WagmiAdapter

和

EthersAdapter

都会注册EVM（

eip155

）命名空间。在同一项目中同时使用两者会导致冲突。

新项目：推荐使用Wagmi — 更好的React钩子集成、活跃的生态系统、更广泛的钱包支持
现有ethers.js代码库：使用Ethers适配器以避免重写提供者逻辑

typescript

// 正确做法 — 仅使用一个EVM适配器
createAppKit({ adapters: [wagmiAdapter, solanaAdapter], ... })

// 错误做法 — 使用两个EVM适配器
createAppKit({ adapters: [wagmiAdapter, ethersAdapter], ... }) // 冲突

Multichain Setup

多链设置

Pass multiple adapters to

createAppKit

typescript

import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { SolanaAdapter } from '@reown/appkit-adapter-solana'
import { mainnet, arbitrum, solana, solanaDevnet } from '@reown/appkit/networks'

const wagmiAdapter = new WagmiAdapter({ networks: [mainnet, arbitrum], projectId })
const solanaAdapter = new SolanaAdapter()

createAppKit({
  adapters: [wagmiAdapter, solanaAdapter],
  networks: [mainnet, arbitrum, solana, solanaDevnet],
  projectId,
  metadata,
})

向

createAppKit

传递多个适配器：

typescript

import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { SolanaAdapter } from '@reown/appkit-adapter-solana'
import { mainnet, arbitrum, solana, solanaDevnet } from '@reown/appkit/networks'

const wagmiAdapter = new WagmiAdapter({ networks: [mainnet, arbitrum], projectId })
const solanaAdapter = new SolanaAdapter()

createAppKit({
  adapters: [wagmiAdapter, solanaAdapter],
  networks: [mainnet, arbitrum, solana, solanaDevnet],
  projectId,
  metadata,
})

Validation checklist

验证清单

```
projectId
```
obtained from dashboard.reown.com
```
metadata.url
```
matches your actual domain (wallets verify this)
Networks imported from
```
@reown/appkit/networks
```
(not from viem/wagmi directly)
For Next.js: SSR flag set, cookie hydration implemented, webpack externals configured
For Wagmi:
```
WagmiProvider
```
and
```
QueryClientProvider
```
wrapping the app
Adapter matches target chain (don't use WagmiAdapter for Solana)
```
createAppKit
```
called once at app initialization (not inside components)

```
projectId
```
来自dashboard.reown.com
```
metadata.url
```
与你的实际域名匹配（钱包会验证这一点）
网络从
```
@reown/appkit/networks
```
导入（而非直接从viem/wagmi导入）
对于Next.js：已设置SSR标志、实现了Cookie水合、配置了Webpack externals
对于Wagmi：
```
WagmiProvider
```
和
```
QueryClientProvider
```
已包裹应用
适配器与目标链匹配（不要为Solana使用WagmiAdapter）
```
createAppKit
```
在应用初始化时仅调用一次（而非在组件内部）

Common errors

常见错误

Error	Cause	Fix
"Project ID is required"	Missing projectId	Get one from dashboard.reown.com
Hydration mismatch (Next.js)	Missing SSR config	Add `ssr: true` to WagmiAdapter, use `cookieToInitialState`
Modal not appearing	`createAppKit` not called	Ensure it runs before app renders
Network not switching	Wrong network import	Use `@reown/appkit/networks` , not viem
Webpack error (Next.js)	Missing externals config	Add `pino-pretty` , `lokijs` , `encoding` to webpack externals
Provider undefined	Accessing before connection	Check `isConnected` before using provider

错误信息	原因	修复方案
"Project ID is required"	缺少projectId	从dashboard.reown.com获取
水合不匹配（Next.js）	缺少SSR配置	为WagmiAdapter添加 `ssr: true` ，使用 `cookieToInitialState`
模态框不显示	未调用 `createAppKit`	确保在应用渲染前运行该函数
网络无法切换	网络导入错误	使用 `@reown/appkit/networks` ，而非viem
Webpack错误（Next.js）	缺少externals配置	将 `pino-pretty` , `lokijs` , `encoding` 添加到Webpack externals
Provider未定义	在连接前访问Provider	使用Provider前检查 `isConnected` 状态

Examples

示例

Example 1 — React + Wagmi basic setup

示例1 — React + Wagmi基础设置

tsx

// config.ts
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { mainnet, arbitrum, base } from '@reown/appkit/networks'

export const projectId = 'b56e18d47c72ab683b10814fe9495694' // localhost testing only
export const networks = [mainnet, arbitrum, base]
export const wagmiAdapter = new WagmiAdapter({ networks, projectId })
export const metadata = {
  name: 'My dApp',
  description: 'My dApp description',
  url: 'https://mydapp.com',
  icons: ['https://mydapp.com/icon.png']
}

// App.tsx
import { createAppKit } from '@reown/appkit/react'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { projectId, networks, wagmiAdapter, metadata } from './config'

const queryClient = new QueryClient()

createAppKit({
  adapters: [wagmiAdapter],
  networks,
  projectId,
  metadata,
  features: { analytics: true }
})

export default function App() {
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <appkit-button />
      </QueryClientProvider>
    </WagmiProvider>
  )
}

tsx

// config.ts
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { mainnet, arbitrum, base } from '@reown/appkit/networks'

export const projectId = 'b56e18d47c72ab683b10814fe9495694' // 仅用于本地测试
export const networks = [mainnet, arbitrum, base]
export const wagmiAdapter = new WagmiAdapter({ networks, projectId })
export const metadata = {
  name: 'My dApp',
  description: 'My dApp description',
  url: 'https://mydapp.com',
  icons: ['https://mydapp.com/icon.png']
}

// App.tsx
import { createAppKit } from '@reown/appkit/react'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { projectId, networks, wagmiAdapter, metadata } from './config'

const queryClient = new QueryClient()

createAppKit({
  adapters: [wagmiAdapter],
  networks,
  projectId,
  metadata,
  features: { analytics: true }
})

export default function App() {
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <appkit-button />
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Example 2 — Vue + Ethers basic setup

示例2 — Vue + Ethers基础设置

vue

<script lang="ts" setup>
import { createAppKit } from '@reown/appkit/vue'
import { EthersAdapter } from '@reown/appkit-adapter-ethers'
import { mainnet, arbitrum } from '@reown/appkit/networks'

const projectId = 'b56e18d47c72ab683b10814fe9495694' // localhost testing only

createAppKit({
  adapters: [new EthersAdapter()],
  networks: [mainnet, arbitrum],
  projectId,
  metadata: {
    name: 'My Vue dApp',
    description: 'My Vue dApp',
    url: 'https://myapp.com',
    icons: ['https://myapp.com/icon.png']
  }
})
</script>

<template>
  <appkit-button />
</template>

vue

<script lang="ts" setup>
import { createAppKit } from '@reown/appkit/vue'
import { EthersAdapter } from '@reown/appkit-adapter-ethers'
import { mainnet, arbitrum } from '@reown/appkit/networks'

const projectId = 'b56e18d47c72ab683b10814fe9495694' // 仅用于本地测试

createAppKit({
  adapters: [new EthersAdapter()],
  networks: [mainnet, arbitrum],
  projectId,
  metadata: {
    name: 'My Vue dApp',
    description: 'My Vue dApp',
    url: 'https://myapp.com',
    icons: ['https://myapp.com/icon.png']
  }
})
</script>

<template>
  <appkit-button />
</template>

Evaluations

场景评估

Activation — "I want to add wallet connection to my React app using Wagmi. How do I set up AppKit?"
Non-activation — "How do I build a mobile wallet with WalletConnect?" (use WalletKit, not AppKit)
Edge case — "I'm using Next.js and getting hydration mismatch errors with AppKit." (Answer: enable SSR flag, use cookieToInitialState)
Framework choice — "I have a Vue 3 app and want to support both Ethereum and Solana. What's the setup?" (Answer: Vue + Wagmi + Solana multichain)
Adapter choice — "Should I use Wagmi or Ethers for my React project?" (Answer: Wagmi recommended for most cases; Ethers if already using ethers.js)
Edge case — "My AppKit modal shows but wallet connection fails." (Answer: check projectId, metadata.url domain match, and network config)

激活场景 — "我想使用Wagmi为我的React应用添加钱包连接功能，如何设置AppKit？"
非激活场景 — "如何使用WalletConnect构建移动钱包？"（应使用WalletKit，而非AppKit）
边缘场景 — "我在使用Next.js时遇到了AppKit的水合不匹配错误。"（解决方案：启用SSR标志，使用cookieToInitialState）
框架选择 — "我有一个Vue 3应用，想要同时支持以太坊和Solana，该如何设置？"（解决方案：Vue + Wagmi + Solana多链集成）
适配器选择 — "我的React项目应该使用Wagmi还是Ethers？"（解决方案：大多数情况推荐Wagmi；如果已使用ethers.js则选择Ethers适配器）
边缘场景 — "我的AppKit模态框能显示，但钱包连接失败。"（解决方案：检查projectId、metadata.url域名匹配情况以及网络配置）

appkit

Original

Translation

Reown AppKit — Web Integration

Reown AppKit — Web 集成指南

Goal

目标

When to use

适用场景

When not to use

不适用场景

Supported Platforms & Adapters

支持的平台与适配器

Choose Your Framework

选择你的框架

Prerequisites

前置条件

Universal Setup Flow (all frameworks)

通用设置流程（所有框架）

Step 1 — Install packages

步骤1 — 安装包

EVM with Wagmi (most common)

EVM + Wagmi（最常用）

EVM with Ethers v6

EVM + Ethers v6

Solana

Solana

Bitcoin

Bitcoin

Step 2 — Configure and create AppKit

步骤2 — 配置并创建AppKit

Step 3 — Trigger the modal

步骤3 — 触发模态框

Step 4 — Access account and network

步骤4 — 访问账户和网络

Key Hooks / Composables

核心钩子/组合式函数

Best Practices

最佳实践

1. Keep all AppKit package versions aligned

1. 保持所有AppKit包版本一致

2. Call createAppKit at module level — never inside a component

2. 在模块级别调用createAppKit — 切勿在组件内部调用

3. Wagmi OR Ethers — never both

3. Wagmi或Ethers — 切勿同时使用

Multichain Setup

多链设置

Validation checklist

验证清单

Common errors

常见错误

Examples

示例

Example 1 — React + Wagmi basic setup

示例1 — React + Wagmi基础设置

Example 2 — Vue + Ethers basic setup

示例2 — Vue + Ethers基础设置

Evaluations

场景评估

2. Call
`createAppKit`
at module level — never inside a component

2. 在模块级别调用
`createAppKit`
— 切勿在组件内部调用