uni-app主入口main.js及主组件App.vue

main.js

main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。

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

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实例

使用Vue.use引用插件，使用Vue.prototype添加全局变量，使用Vue.component注册全局组件

可以引用vuex，因涉及多个文件，此处没有提供示例，详见hello uni-app示例工程

无法使用vue-router，路由须在pages.json中进行配置。如果开发者坚持使用vue-router，可以在 插件市场 找到转换插件

注意：nvue暂不支持在main.js注册全局组件

App.vue

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效

应用生命周期

uni-app支持如下应用生命周期函数：

在App.vue文件里使用生命周期函数，如下：

<script>
    export default {
        onLaunch: function() {
            console.log('App Launch，app启动')
        },
        onShow: function() {
            console.log('App Show，app展现在前台')
        },
        onHide: function() {
            console.log('App Hide，app不再展现在前台')
        }
    }
</script>

注意

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效
• onLaunch里进行页面跳转，如遇白屏报错，请参考：https://ask.dcloud.net.cn/article/35942
• App.vue不能写模板

globalData

小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用

以下是App.vue中定义globalData的相关配置：

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>

• js中操作globalData的方式如下：getApp().globalData.text = 'test'
• 在应用onLaunch时，getApp对象还未获取，暂时可以使用this.$scope.globalData获取globalData
• 如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值
• nvue的weex编译模式中使用globalData的话，由于weex生命周期不支持onShow，但熟悉5+的话，可利用监听webview的addEventListener show事件实现onShow效果，或者直接使用weex生命周期中的beforeCreate。但建议开发者使用uni-app编译模式，而不是weex编译模式
• globalData是简单的全局变量，如果使用状态管理，请使用vuex（main.js中定义）

全局样式

在App.vue中，可以一些定义全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在App.vue中。

注意如果工程下同时有vue和nvue文件，全局样式的所有css会应用于所有文件，而nvue支持的css有限，编译器会在控制台报警，提示某些css无法在nvue中支持。此时需要把nvue不支持的css写在单独的条件编译里。如：

<style>
    /* #ifndef APP-PLUS-NVUE */
    @import './common/uni.css';
    /* #endif*/
</style>