入门

iPortal 提供了一个 Vue 组件库 iPortal Components，包含数种常用的 UI 组件。开发人员在对 iPortal 首页进行全代码定制时，可以调用其中的组件以提高开发效率，您也可以在自己开发的 Web 应用中使用该组件库。本文假定您已具备 Vue 与 Node.js 的基础知识，并掌握了 Vue 的开发方式。

安装

• 首页全代码定制范例工程中，在 package.json 已默认引入了 iPortal Components 组件库，您可以直接使用 npm install 命令进行安装，开始使用其中的组件。

• 如果您希望在自己开发的 Web 应用中使用 iPortal Components 组件库，需完成如下环境配置：

1. 进入工程目录，输入如下命令安装 iPortal Components 组件库：

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

2. 安装 iClient Vue-MapboxGL 库

npm install @supermap/vue-iclient-mapboxgl

3. 输入如下命令安装 ts-loader 依赖和 typescript 依赖

npm install ts-loader@6.2.0 typescript@3.7.3

4. 新建 vue.config.js 文件，写入如下内容：

const path = require('path');

module.exports = {

    // 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$/]

                                }

                            }

                        ]

                    }

                ]

            }

        }

    }

}

引入 iPortal Components

在 main.js 中写入以下内容：

import Vue from 'vue'

import iportalComponents from '@ispeco/iportal-components'

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

Vue.use(iportalComponents)

以上即完成了 iPortal Components 组件库的引入。

使用组件

引入 iPortal Components 组件库后，您可以在 .vue 文件中，通过以下方式调用组件，以 横幅 (IptlBanner) 组件为例：

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

其中粗体部分需根据组件类型的不同进行更改。有关各个组件的属性和方法，请参阅：组件指南。