vue-apicloud-quickstart
a simple toolkit for developing app with vue.js in apicloud
Last updated 15 days ago by w-xuefeng .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-apicloud-quickstart 
SYNC missed versions from official npm registry.

vue-apicloud-quickstart

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

Github Action Github Action npm npm

English | 简体中文

Documentation

Usage

  • 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/apicloud     # or use yarn
    $ vue invoke @w-xuefeng/apicloud
    

Explanation

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

    import App from './App.vue'
    import Vue from 'vue'
    import VAQ from 'vue-apicloud-quickstart'
    import pages from '@/config/pages'
    
    Vue.config.productionTip = false
    
    Vue
      .use(VAQ, {
        pages,
        // debugOnPC: process.env.NODE_ENV !== 'production '
      })
      .init({
        el: '#app',
        render: h => h(App)
      })
    
  • 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, 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
      |   |
      │   └── config               # Configuration entry
      |       |
      |       └── pages.js         # Page profile
      
    • The page configuration file pages.js has the following structure

      module.exports = [
        {
          title: 'advertisingPage',
          name: 'index',
          path: 'index/index'
        },
        {
          title: 'loginPage',
          name: 'login',
          path: 'login/index'
        },
        {
          title: 'homePage',
          name: 'home',
          path: 'home/index'
        }
      ];
      
      
  • 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

Current Tags

  • 1.0.14                                ...           latest (15 days ago)

15 Versions

  • 1.0.14                                ...           15 days ago
  • 1.0.13                                ...           16 days ago
  • 1.0.12                                ...           16 days ago
  • 1.0.11                                ...           a month ago
  • 1.0.10                                ...           a month ago
  • 1.0.9                                ...           a month ago
  • 1.0.8                                ...           a month ago
  • 1.0.7                                ...           a month ago
  • 1.0.6                                ...           a month ago
  • 1.0.5                                ...           a month ago
  • 1.0.4                                ...           a month ago
  • 1.0.3                                ...           a month ago
  • 1.0.2                                ...           a month ago
  • 1.0.1                                ...           a month ago
  • 1.0.0                                ...           a month ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 53
Last Day 0
Last Week 15
Last Month 138
Dependencies (3)
Dev Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |