二、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):

// 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
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值