vue-apicloud-quickstart

The start up of using vue.js + apicloud to develop mobile applications

Documentation

Docs address：https://vaq.wangxuefeng.com.cn

Install

Description: This project already supports typescript, just select typescript when creating a Vue project

This project is based on w-xuefeng/vue-cli-plugin-apicloud, run the following command to install

$ vue add @w-xuefeng/apicloud

$ npm i @w-xuefeng/vue-cli-plugin-apicloud     # or use yarn
$ vue invoke @w-xuefeng/apicloud

Usage

In the main.js, you can configure options of plugin including pages and debugOnPC

Chaining the init method will create a Vue instance and ensure that it executes after apiready, returningPromise<CombinedVueInstance<Vue, object, object, object, object>>

import App from './App.vue'
import Vue from 'vue'
import VAQ from 'vue-apicloud-quickstart'
import pages from '@/config/pages.json'

Vue.config.productionTip = false

Vue
  .use(VAQ, {
    pages,
    // debugOnPC: process.env.NODE_ENV !== 'production'
  })
  .init({
    el: '#app',
    render: h => h(App)
  })

Options

1 pages: Page configuration

Create the pages directory and the config directory under the src directory, assuming that there are existing open screen ad pages index/index.vue, login page login/index.vue and application home page home/index.vue、webview page home/web.vue, the directory structure is as follows:

├── src
|   |
│   ├── pages                # Page entry
|   |   |
|   |   ├── index
|   |   |   |
|   |   |   └── index.vue    # Open screen advertising page
|   |   |
|   |   ├── login
|   |   |   |
|   |   |   └── index.vue    # Login page
|   |   |    
|   |   └── home
|   |       |
|   |       ├── index.vue    # APP home page
|   |       |
|   |       └── web.vue      # Webview page
|   |
│   └── config               # Configuration entry
|       |
|       └── pages.json       # Page profile
|

The page configuration file pages.json has the following structure

[
  {
    "title": "advertisingPage",
    "name": "index",
    "path": "index/index"
  },
  {
    "title": "loginPage",
    "name": "login",
    "path": "login/index"
  },
  {
    "title": "homePage",
    "name": "home",
    "path": "home/index"
  },
  {
    "title": "webPage",
    "name": "web",
    "path": "home/web"
  }
]

2 debugOnPC: Debugging on PC
- Recommended scenarios
  - When development page and debugging the style in the early, you could set debugonpc to true, which can be debugged in the PC browser
  - When development and debugging function later, you could set debugOnPC to false, debugging in custom Loader.
  - Or you can always set debugOnPC to false and debug in custom Loader.
  - Note: Make sure debugOnPC is false when compiling and building, otherwise it will affect normal operation after final packaging
- Because apicloud will inject global variables api into window in apploader or custom loader, the ability to call native modules can be realized through api when using loader debugging on mobile devices. To ensure that the initialization is completed when calling the native module, all statements calling the native module should be executed in hooks of apiready.
- When debugOnPC is the default value false, the instance of Vue page will execute in hooks of apiready, so the debugging page cannot be previewed in PC browser.
- When debugOnPC is true, new vue() will be executed directly to create a page instance. At this time, all api related statements cannot be executed, but the page content unrelated to api will be displayed in the browser normally.

w-xuefeng / vue-apicloud-quickstart Goto Github PK