在node-red节点编辑框中嵌入vue框架与plus组件库

实现效果

目录结构

第一步：引入资源

引入vue，可以下载一个vue.js 也可以联网引入，也可以npm install
plus同理，都放在links下面了

第二步：注册vue和plus

注册app

第三步：写你的编辑器

vue部分

第四步：导出组件

导出

上代码：

index.html

<!-- 引入vue框架-->
<script src="vue.js"></script>
<!-- 引入vue编辑页面代码-->
<script src="edit.js"></script>
<!-- 引入vue编辑页面样式-->
<link rel="stylesheet" href="edit.css" />
<!-- 引入element 的样式-->
<link rel="stylesheet" href="plus.css" />
<!-- 引入element 的组件库-->
<script src="plus.js"></script>
<!-- node-red注册 -->
<script type="text/javascript">
    var app, nodeData;
    function close(save) {
        app && app.unmount(save); // 卸载掉
    }
    RED.nodes.registerType('demo', {
        category: 'demo',
        defaults: {
            name: { value: "demo" },
            sex: { value: '' },
            age: { value: '' },
        },
        label: function () { return this.name },
        inputs: 1, // 上游：输入 0 或者 1
        outputs: 1, // 输出至下游 0 或者 more
        icon: 'font-awesome/fa-toggle-on', // 标签<i class="fa-sharp fa-solid fa-toggle-on"></i>
        oneditcancel: function () {
            close();
        },
        oneditdelete: function () {
            close();
        },
        oneditsave: function () {
            close();
            console.log(nodeData, 'oneditsave')
            this.age = nodeData.age;
            this.name = nodeData.name;
            this.sex = nodeData.sex;
        },
        oneditprepare: function () {
            nodeData = {
                age: this.age,
                name: this.name,
                sex: this.sex,
            };
            app = mount(nodeData, (data) => {
                nodeData = data;
            })
        },
    });
</script>
<!-- 配置窗口 -->
<script type="text/html" data-template-name="demo">
    <div id="demo-root">
        <div>
            demo for vue and plus
        </div>
        <el-input v-model="name" style="width: 100%; margin-top: 10px;"></el-input>
        <el-select v-model="sex" style="width: 100%; margin-top: 10px;">
            <el-option value="男">男</el-option>
            <el-option value="女">女</el-option>
        </el-select>
        <el-input v-model="age" type="number" style="width: 100%; margin-top: 10px;"></el-input>
    </div>
</script>
<!-- hover提示 -->
<script type="text/html" data-template-name="demo">
    <div class='form-row'>
        demo 提示
    </div>
</script>

主要代码：index.js

module.exports = function (RED) {
    function demo(config) {
        RED.nodes.createNode(this, config);
        const node = this;
        Object.keys(config).forEach(i => {
            node[i] = config[i];
        });
        node.on('input', (data) => {
            // 这里数据派发
        })
    }
    RED.nodes.registerType("demo", demo);
}

edit.js

function mount(nodeData, saveData) {
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                name: nodeData.name,
                age: nodeData.age,
                sex: nodeData.sex,
            }
        },
        beforeUnmount() {
            saveData({
                name: this.name,
                age: this.age,
                sex: this.sex,
            })
            console.log('beforeUnmount')
        },
        mounted() {
            console.log('mounted');
        },
        methods: {

        },
    });
    app.use(ElementPlus);
    app.mount('#demo-root');
    return app;
}

edit.css

#demo-root {
    border: 1px solid rgb(0, 119, 255);
    border-radius: 4px;
    padding: 10px;
    width: 280px;
}

/* node-red对input有样式设置，这里清理一下 */
#demo-root input {
    border: 0;
    color: inherit;
    background: inherit; 
}

service.js

module.exports = function (RED) {
    "use strict";
    const fs = require('fs');
    const path = require('path');
    const app = RED.httpNode || RED.httpAdmin;
    app.get("/vue.js", function (_, res) {
        fs.readFile(path.join(__dirname, 'links/vue.js'), (_, js) => {
            res.send(js);
        });
    });
    app.get("/plus.css", function (_, res) {
        res.set('Content-Type', 'text/css');
        fs.readFile(path.join(__dirname, 'links/plus.css'), (_, js) => {
            res.send(js);
        });
    });
    app.get("/plus.js", function (_, res) {
        fs.readFile(path.join(__dirname, 'links/plus.js'), (_, js) => {
            res.send(js);
        });
    });
    app.get("/edit.css", function (_, res) {
        res.set('Content-Type', 'text/css');
        fs.readFile(path.join(__dirname, 'nodes/edit.css'), (_, js) => {
            res.send(js);
        });
    });
    app.get("/edit.js", function (_, res) {
        fs.readFile(path.join(__dirname, 'nodes/edit.js'), (_, js) => {
            res.send(js);
        });
    });
}

博客可能看的比较清晰：在node-red 中使用vue和plus_码代码的小公举的博客-CSDN博客