Getting started

iPortal provides a Vue component library, that is iPortal Components, which contains several common used UI components. When you customize the iPortal home page with full code, using the provided components can improve your development efficiency. And you can also import and use them in your Web applications. This section assumes that you've known the basic knowledge of Vue and Node.js, and already mastered the Vue development method.

Installation

The full code customization of home page demonstration project imports the iPortal Components library in the package.json by default, so you can directly use the command npm install to install the library and use the included components.

To use the iPortal Components library in your newly created Web application, enter your project directory and use the command below to install:

npm install @ispeco/iportal-components --@ispeco:registry=http://npm.supermap.io

• The full code customization of home page demonstration project imports the iPortal Components library in the package.json by default, so you can directly use the command npm install to install the library and use the included components.

• To use the iPortal Components library in your newly created Web application, you need to do the following environment configurations:

1. Enter the project directory, input the following command to install the iPortal Components library:

npm install @ispeco/iportal-components --@ispeco:registry=http://npm.supermap.io 

2. Install the iClient Vue-MapboxGL library

npm install @supermap/vue-iclient-mapboxgl

3. Run the command to install the ts-loader dependency and typescript dependency

npm install ts-loader@6.2.0 typescript@3.7.3

4. Create a vue.config.js file and write the following contents:

const path = require('path');

module.exports = {

    // Compatible with IE

    transpileDependencies: [

        '@supermap/vue-iclient-mapboxgl/src',

        '@mapbox/mapbox-gl-draw',

        'resize-detector',

        'colorcolor',

        '@supermap/vue-iclient-mapboxgl/static/libs/echarts-layer',

        '@supermap/vue-iclient-mapboxgl/static/libs/json-sql'

    ],

    configureWebpack: (config) => {

        return {

            resolve: {

                extensions: ['.mjs', '.js', '.vue', '.json', '.wasm', '.ts']

            },

            module: {

                rules: [

                    {

                        test: /\.(ts|tsx)$/,

                        include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules/@supermap/vue-iclient-mapboxgl')],

                        use: [

                            {

                                loader: 'babel-loader'

                            },

                            {

                                loader: 'ts-loader',

                                options: {

                                appendTsSuffixTo: [/\.vue$/]

                                }

                            }

                        ]

                    }

                ]

            }

        }

    }

}

Import iPortal Components

Write the contents in the main.js file:

import Vue from 'vue'

import iportalComponents from '@ispeco/iportal-components'

import '@ispeco/iportal-components/lib/iportal-components.css'

Vue.use(iportalComponents)

The above code implements importing the iPortal Components library.

Use components

After importing the iPortal Components library, in a .vue file you created, you can call components from the library using the following way. Here we take the banner component -- IptlBanner as an example:

<template>

    <div class="banner-widget">

         <iptl-banner

            styleType="normal"

            imgUrl="./image.png"

            titleColor="#FFFFFF"

            subTitleColor="#FFFFFF"

            title="'Banner"

            subTitle=""

            button="button"

            buttonHref="https://iportal.supermap.io"

        />

    </div>

</template>

For a detailed introduction of the attributes and methods of components, see: Components guide.