尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

二、uni-app入口文件(main.js)

二、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. 引入核心依赖importAppfrom./App.vueimport{createSSRApp}fromvue// uni-app 官方推荐使用 createSSRApp 以兼容多端和 SSRimport{createPinia}frompinia// 引入 Pinia 状态管理插件importMyButtonfrom/components/MyButton.vue// 引入自定义全局组件// 2. 引入自定义封装的全局工具例如网络请求工具import{$http}from/utils/request// 3. 创建应用实例的入口函数uni-app 约定的写法exportfunctioncreateApp(){constappcreateSSRApp(App)// 使用 App.vue 作为根组件创建实例// 核心配置区 // ① 安装全局插件如 Pinia 状态管理constpiniacreatePinia()app.use(pinia)// ② 注册全局组件任何页面都可以直接使用 MyButton /app.component(MyButton,MyButton)// ③ 挂载全局属性把网络请求挂载到全局页面中可通过 this.$http 调用app.config.globalProperties.$http$http// 返回应用实例交由 uni-app 框架接管后续的生命周期和渲染return{app}}
返回列表