Skip to content

main.js ​

main.js 是 qinjs 的入口文件。 qinjs js 引擎版是 main.js 以下一般用 main.js 泛指全部。

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

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

js
import App from './App';
import { createSSRApp } from 'vue';
//全局引用 page-head 组件
import PageHead from './components/page-head.vue';

export function createApp() {
  const app = createSSRApp(App);
  //全局注册 page-head 组件,每个页面将可以直接使用该组件
  app.component('page-head', PageHead);

  return {
    app,
  };
};
import App from './App';
import { createSSRApp } from 'vue';
//全局引用 page-head 组件
import PageHead from './components/page-head.vue';

export function createApp() {
  const app = createSSRApp(App);
  //全局注册 page-head 组件,每个页面将可以直接使用该组件
  app.component('page-head', PageHead);

  return {
    app,
  };
};

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

代码时序 ​

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

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

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

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

插件 ​

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

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

无法使用 vue-router ,路由须在 pages.json 中进行配置。