Skip to main content

引入第三方

这里讲解网页窗体如何引入第三方UI框架和插件。

如何引入第三方

知识准备：

安装第三方框架有两种场景：

  • 业务构件中安装
  • 生成代码构件工程中安装

注意：当前例子使用Vant2组件库作为例子，您也可以引入element ui、echarts等组件库进行使用。

1. 业务构件中安装​

【案例下载】

打开系统目录：

image-20220322101212098

在Template文件夹中进行安装(建议：先备份Template文件夹)：

image-20220322101624653

通过 npm 在Template目录下进行安装：

# 直接在业务构件中使用：
$ cd /d D:\tools\BoxApp\V-AppDeveloper\V3Dev\Template

# 安装 Vant 2：
$ npm i vant@2.11.0 -S

演示效果：

image-20220322172407115

2. 生成代码构件工程中安装​

生成代码构件工程：编写静态页面时，只需要在导出的项目路径下安装即可。

例如：

导出的代码构件工程路径为：E:\workspace-web\web_staticpage_case

image-20220323094503623

通过 npm 在代码构件工程目录下进行安装：

# 在生成代码构件工程中使用：
$ cd /d E:\workspace-web\web_staticpage_case

# 新导出的项目需要安装所有依赖：
$ npm i 

# 安装 Vant 2：
$ npm i vant@2.11.0 -S

3. 引入组件​

3.1 手动按需引入组件​

在不使用插件的情况下，可以手动引入需要的组件。

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

script代码​

import vdk from 'v3-vdk';
import entities from './entities.js';

//1. 按需引入组件
import Button from 'vant/lib/button';
import 'vant/lib/button/style';

export default {
    props: entities,
    //2. 注册组件并设置自定义元素的名字(推荐跟官方标签保持一致)。
    components: {
        'van-button': Button    //使用 kebab-case (短横线分隔命名) ,在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
        //'VanButton': Button   //使用 PascalCase (首字母大写命名)
    },
    data: function () {
        return {};
    },
    methods: {

    }
};

template代码​

按需引入组件需要注册才可以使用。

<div>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
</div>

部署并预览效果​

image-20220322135327955

3.2 导入所有组件​

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

import Vant from 'vant';
import 'vant/lib/index.css';

script代码​

import vdk from 'v3-vdk';
import entities from './entities.js';

// 1.导入所有组件
import Vant from 'vant';
import 'vant/lib/index.css';

export default {
    props: entities,
    data: function(){
        return {};
    },
    methods:{
        
    }
};

template代码​

导入所有组件不需要注册可以直接使用。

<div>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
</div>

部署并预览效果​

image-20220322135327955

Tips: 配置按需引入后，将不允许直接导入所有组件。

4. 样式冲突问题​

引入第三方组件库有时候会与内置的iview样式冲突时，推荐使用纯净模式：

'use v3-base-mode';

img