vue-apicloud-quickstart

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

English | 简体中文

Documentation

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

Install

• Description: This project already supports typescript, just selecttypescript 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

  or

  $ 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 aVue 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 apiinto 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.

Reference & Acknowledge

• vuejs/vue-cli
• app-case-community/vue-cli-plugin-apicloud