VUE 自定义 UI

通过此文档您将了解到以下内容

• 搭建 VUE 自定义 UI 工程
• 打包生成 JS 和 CSS

示例工程

单击下载

搭建工程

您可以通过 VUE 脚手架搭建 VUE 工程，执行以下命令：

vue create hello-world

其中 HelloWorld.vue 为自定义组件，main.js 为业务主流程入口，加载自定义组件流程如下：

// 1. 导入自定义 Vue 组件
import HelloWorld from './components/HelloWorld';
// 2. 导入全局 TCIC 和 Vue
const TCIC = window.TCIC;
const Vue = window.Vue;
// 3. 注册自定义标签
Vue.customElement('hello-world', HelloWorld);
// 4. 注册自定义组件
TCIC.SDK.registerComponent('hello-world', HelloWorld);
// 5. 加载自定义组件
TCIC.SDK.instance.loadComponent('hello-world');

编译打包

由于 TCIC 在运行时将加载您自定义的 JS 和 CSS，您需要将自定义组件和 业务流程 main.js 打包成一个 JS 和 一个 CSS 文件，可执行以下命令：

./node_modules/.bin/vue-cli-service build --target lib --name myLib 'src/main.js'

命令和导出的文件说明如下：

• myLib 为导出的文件名
• myLib.css 为导出的 CSS 文件
• myLib.umd.js 为导出的 JS 文件
• myLib.umd.min.js 为 myLib.umd.js 对应的压缩文件

其中 myLib.css 和 myLib.umd.min.js 即为 TCIC 加载自定义界面需要的 custom.css 和 custom.js。