自定义控件中使用 Vue

环境搭建

常规初始化自定义控件项目 t-tools init

安装 devDependencies yarn add vue-loader vue-template-compiler -D

安装 dependencies yarn add vue vuera

配置 setting.js

// 顶部引入
const { VueLoaderPlugin } = require('vue-loader')
const webpack = require('webpack')

// 导出
module.exports ={
  ...
  // node_modules 改为true
  node_modules: true,

  ...

  // 新增 Webpack配置这个大概率复制过去就可以了
  webpackConfig: (webpackConfig, webpackMerge)=> {

    const config = {
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
      },
      plugins: [
        new VueLoaderPlugin(),
        new webpack.WatchIgnorePlugin([
          /\.d\.ts$/
        ])
      ]
    }

    webpackConfig.module.rules[0].options['appendTsSuffixTo'] = [/\.vue$/]

    return webpackMerge.merge(webpackConfig, config);
  }

}

自定义容器中使用Vue

import React from 'react'
import { ItemContainer } from '@terminus/nusi-engine';

// 导入 VueWrapper 即vue转换为react的工具
import { VueWrapper } from 'vuera';

// 导入vue组件文件
import ContentComponent from './Content.vue';

type IProps = {}
// 对外暴露基本都是使用 react 模板不变，只是不同容器继承
export default class extends ItemContainer<IProps>{
  render(){

    // 当前容器上下文
    const ctx = this;

    // 这里面需要传入两个 一个是上下文，一个是vue组件 ctx 最终给vue内部去获取xml信息使用
    return <VueWrapper ctx={ctx} component={ContentComponent} />
  }
}

Vue 文件里面使用 react nusi 组件库

<template>
  <div>
    <h3>This is vue content component.</h3>
    <react component="component.Button" onClick="show" type="primary" >按钮</react>
  </div>
</template>

<!-- 这边使用 lang 为 ts -->
<script lang="ts">

// 导入 react 转 vue 工具
import { ReactWrapper } from 'vuera'
// 导入 react 组件
import { Button } from '@terminus/nusi'
export default {
  props: {
    ctx: Object
  },
  data(){
    return {
      component: {
        Button
      }
    }
  },
  methods: {
    show(){
      console.log(this.ctx)
      alert('This is nusi `Button onClick` event.')
    }
  },
  components: {
    // 这里使用 ReactWrapper 作为 react 组件传递进去
    react: ReactWrapper,
  }
};
</script>

最终效果

相关链接

• vuera 库
• 自定义控件