This page is translated by Google Cloud Translation API

Switch to Chinese

main.js/main.uts

main.js/uts是 uni-app 的入口文件。uni-app js引擎版是main.js，而uni-app x则是main.uts。以下一般用main.js泛指全部。

main.js主要作用是初始化vue实例、定义全局组件、使用需要的插件如 i18n、vuex。

首先引入了Vue库和App.vue，创建了一个vue实例，并且挂载vue实例。

uni-app（Vue2）

uni-app（Vue3）

uni-app x（main.uts）

import Vue from 'vue'
import App from './App'
import PageHead from './components/page-head.vue' //全局引用 page-head 组件

Vue.config.productionTip = false
Vue.component('page-head', PageHead) //全局注册 page-head 组件，每个页面将可以直接使用该组件
App.mpType = 'app'

const app = new Vue({
...App
})
app.$mount() //挂载 Vue 实例

一般情况下，使用easycom比全局组件更常用，easycom按需应用更节省资源。

代码时序

开发者写的代码，在应用启动时，按如下时序加载：

1. main.js/uts 的 export function createApp() {} 外的代码、任何页面/组件的script中export default {}外的代码
2. main.js/uts 的 export function createApp() {} 中的代码
3. app.vue/uvue中onLaunch的代码
4. 首页的onLoad
5. 首页的onReady

开发者需谨慎在main.js/uts、页面/组件script中export default {}外、和onLaunch中编写代码：

1. 这些的代码都会影响启动速度（定义type不会，type是使用时才加载）
2. 执行太早，很多功能和API无法使用，需trycatch。尤其是与界面相关的都无法使用，此时首页都还没有创建。
3. main.js/uts、页面script中export default {}外的代码，其创建的变量在应用存活时一直占据着内存，不会跟随页面关闭而回收

插件

Use Vue.use to quote the plug-in, use Vue.prototype to add global variables, and use Vue.component to register global components.

vuex can be referenced. Because multiple files are involved, no examples are provided here, please refer to the hello uni-app example project for details.

vue-router cannot be used, and routing must be configured in pages.json. If developers insist on using vue-router, they can find conversion plug-ins in the Plug-in market.

Notice

• nvue 暂不支持在 main.js 注册全局组件
• uni-app x 暂不支持 i18n、vuex、pinia等插件