简体中文
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
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 实例
uni-app Vue3
import App from './App'
import { createSSRApp } from 'vue'
import PageHead from './components/page-head.vue' //全局引用 page-head 组件
export function createApp() {
const app = createSSRApp(App)
app.component('page-head', PageHead) //全局注册 page-head 组件,每个页面将可以直接使用该组件
return {
app
}
}
uni-app x 的 main.uts
import App from './App'
import { createSSRApp } from 'vue'
import PageHead from './components/page-head.vue' //全局引用 page-head 组件
export function createApp() {
const app = createSSRApp(App)
app.component('page-head', PageHead) //全局注册 page-head 组件,每个页面将可以直接使用该组件
return {
app
}
}
一般情况下,使用easycom比全局组件更常用,easycom按需应用更节省资源。
开发者写的代码,在应用启动时,按如下时序加载:
export function createApp() {}
外的代码、任何页面/组件的script中export default {}
外的代码export function createApp() {}
中的代码开发者需谨慎在main.js/uts、页面/组件script中export default {}
外、和onLaunch中编写代码:
export default {}
外的代码,其创建的变量在应用存活时一直占据着内存,不会跟随页面关闭而回收使用Vue.use
引用插件,使用Vue.prototype
添加全局变量,使用Vue.component
注册全局组件。
可以引用vuex
,因涉及多个文件,此处没有提供示例,详见hello uni-app
示例工程。
无法使用vue-router
,路由须在pages.json
中进行配置。如果开发者坚持使用vue-router
,可以在插件市场找到转换插件。
注意