Mobile Platform as a Service:Development and configuration

File structure

A local component consists of two main files: main.vue and manifest.json.

.
├── main.vue
└── manifest.json

Create a component

You can run the act command in the folder where you want to store the component.

➜  ~ act init
? Select an application type
  Cube template card (VUE format)
❯ Cube card component (VUE format)


➜  ~ act init
? Select an application type Cube card component (VUE format)
? Enter the component name local-component
? Select a component management type (Use arrow keys)
❯ Built into the card project
  Share to the NPM cloud

Associate a component with a card

To use a component in a card, you must declare the association in the useComponents field of the card's manifest.json file.

# Card's manifest.json file

{
    ...
    "useComponents": {
        "local-component": "./components/LocalComponent",
        "local-component-2": {
            "path": "./components/LocalComponent2",
            "type": "local"
        }
    },
    ...
}

# Card's main.vue file

<template>
  <div class="root">
  	<local-component class="comp"></local-component>
  	<local-component-2 class="comp2"></local-component-2>
  </div>
</template>

The value of useComponents is a key-value pair. The Key specifies the tag name to use for the component within the card, and the Value specifies the source information of the component.

The Value can be in either String or Object format.

• String: The path to the root directory of the associated component (the directory where the component's manifest.json file is located).

  • Relative path: The path to the component's root directory relative to the card's manifest.json file.

  • Absolute path: The absolute path to the component's root directory.

• Object: The source configuration of the associated component.

  • path: The path to the root directory of the associated component (the directory where the component's manifest.json file is located). It also supports relative and absolute paths.

  • type: local (optional field). When you use a path for configuration, the default value of the type field is local.

Associate a component with another component

Components can be associated not only with cards but also with other components. For clarity, the component that uses another component is called the host component, and the component being used is called the referenced component.

To use a referenced component in a host component, you must declare the association in the useComponents field of the host component's manifest.json file.

# Host component's manifest.json file

{
  ...
  "isComponent": true,
  "useComponents": {
    "other-component": "../LocalComponent2"
  },
  ...
}

# Host component's main.vue file

<template>
  <div class="root">
    <other-component class="comp"></other-component>
  </div>
</template>

File structure

A cloud component consists of three main files: the component entity (main.vue), the component configuration (manifest.json), and the npm configuration (package.json).

.
├── main.vue
├── manifest.json
└── package.json

Create a component

You can run the act command in the folder where you want to store the component.

➜  ~ act init
? Select an application type
  Cube template card (VUE format)
❯ Cube card component (VUE format)


➜  ~ act init
? Select an application type Cube card component (VUE format)
? Enter the component name cloud-component
? Select a component management type
  Built into the card project

Associate a component with a card

To use a component in a card, declare it in the useComponents field of the card's manifest.json file.

# Card's manifest.json file

{
  ...
  "useComponents": {
    "cloud-component": "@ali/card-component-cloud-component",
    "cloud-component-2": {
      "path": "@ali/card-component-cloud-component-2",
      "type": "cloud"
    }
  },
  ...
}

# Card's main.vue file

<template>
  <div class="root">
  	<cloud-component class="comp"></cloud-component>
  	<cloud-component-2 class="comp2"></cloud-component-2>
  </div>
</template>

The value of useComponents is a key-value pair where the Key is the tag name of the component used in the card, and the Value is the source information for the associated component.

The Value supports both String and Object formats.

• String: The npm package name of the associated component.

• Object: The source configuration of the associated component.

  • path: The npm package name of the associated component.

  • type: The value is cloud. This is an optional field that defaults to cloud.

Associate a component with another component

Components can be associated not only with cards but also with other components. For clarity, the component that uses another component is called the host component, and the component being used is called the referenced component.

To use a referenced component in a host component, you must declare the association in the useComponents field of the host component's manifest.json file.

# Host component's manifest.json file

{
  ...
  "isComponent": true,
  "useComponents": {
    "cloud-component": "@ali/card-component-cloud-component"
  },
  ...
}

# Host component's main.vue file

<template>
  <div class="root">
    <cloud-component class="comp"></cloud-component>
  </div>
</template>

Install cloud components

Using cloud components in a card project is different from using local components. Because the source code for cloud components is maintained on the npm platform, you must download any cloud components that the card depends on to your local project before you can compile the card. In the npm ecosystem, this process is known as installing dependencies.

Before you can install component dependencies, you must create a package.json file in the root directory of the card project. This is the same directory that contains the card's .act.config.json file.

You can either use the npm init command to create a package.json file, or manually create a package.json file in JSON format.

➜  ~ npm init -h

npm init [--force|-f|--yes|-y|--scope]
npm init <@scope> (same as `npx <@scope>/create`)
npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`)

aliases: create, innit

When installing an npm package for a cloud component for the first time, you can execute the command npm install [<@scope>/]<pkg>@<tag> --save in the root directory of the card project. This will automatically place the cloud component package in the node_modules folder in the root directory of the card project; at the same time, the dependency information of the associated cloud component npm package will be automatically added to the dependencies field of the project's package.json file.

Code example

npm install @ali/card-component-my-cloud-component@latest --save

# package.json file in the card project's root directory

{
  ...
  "dependencies": {
    "@ali/card-component-my-cloud-component": "latest"
  },
  ...
}

To update or reinstall a cloud component package that is already configured in the package.json file, run npm install in the project's root directory.

Release cloud components

Releasing a cloud component is the same as releasing a regular npm package. For more information, see the npm documentation about releasing packages.