npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-apicloud-quickstart

v1.0.27

Published

a simple toolkit for developing app with vue.js in apicloud

Downloads

63

Readme

Github Action Github Action npm npm

English | 简体中文

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

    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 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.

Reference & Acknowledge