二、uni-app入口文件（main.js）

一、概述

main.js 是整个 uni-app 应用的入口文件。当你的微信小程序启动时，系统第一个找的就是这个文件。

主要任务：创建一个 Vue 应用实例，把 App.vue 挂载起来，然后告诉框架："准备好啦，可以开始运行整个应用了！"。

二、作用

1. 初始化 Vue 实例

这是它最核心的工作。它会把你的根组件 App.vue 引进来，创建一个 Vue 应用实例，并把它交给 uni-app 框架去渲染。

2. 安装全局插件

在开发中，我们经常会用到一些状态管理工具（比如 Pinia 或 Vuex），你可以把它们理解为"全局仓库"。在 main.js 里，你可以把这个仓库注册到整个应用中，这样你在任何一个页面都能轻松存取数据。

3. 注册全局组件

假设你写了一个非常好看的"自定义按钮"组件，几乎每个页面都要用。如果你在每个页面都去 import 引入一次，会非常麻烦。你可以在 main.js 中把它注册为全局组件，之后在任何页面都可以直接使用，不用再重复引入。

4. 挂载全局属性

比如你封装了一个网络请求方法 request.js，希望在所有页面都能通过 this.$api 直接调用。你就可以在 main.js 中把它挂载到全局属性上，实现"一次配置，处处使用"。

三、示例

下面是一份完整的 main.js 最佳实践示例（Vue3）：

js 复制代码

// main.js - uni-app 最佳实践示例 (Vue3)

// 1. 引入核心依赖
import App from './App.vue'
import { createSSRApp } from 'vue' // uni-app 官方推荐使用 createSSRApp 以兼容多端和 SSR
import { createPinia } from 'pinia' // 引入 Pinia 状态管理插件
import MyButton from '@/components/MyButton.vue' // 引入自定义全局组件

// 2. 引入自定义封装的全局工具（例如网络请求工具）
import { $http } from '@/utils/request'

// 3. 创建应用实例的入口函数（uni-app 约定的写法）
export function createApp() {
  const app = createSSRApp(App) // 使用 App.vue 作为根组件创建实例

  // === 核心配置区 ===

  // ① 安装全局插件（如 Pinia 状态管理）
  const pinia = createPinia()
  app.use(pinia)

  // ② 注册全局组件（任何页面都可以直接使用 <MyButton />）
  app.component('MyButton', MyButton)

  // ③ 挂载全局属性（把网络请求挂载到全局，页面中可通过 this.$http 调用）
  app.config.globalProperties.$http = $http

  // 返回应用实例，交由 uni-app 框架接管后续的生命周期和渲染
  return {
    app
  }
}