пользовательский интерфейс в узле красный (узел-красный-contrib-uibuilder & VueJS & пакет импорта) - PullRequest
Новая
       10

пользовательский интерфейс в узле красный (узел-красный-contrib-uibuilder & VueJS & пакет импорта)

1 голос
/ 31 января 2020

Я использую node-red для записи данных с датчиков в базу данных. Я также планирую использовать его для отображения данных. Для отображения я использую node-red-contrib-uibuilder, который, как я понимаю, использует VueJS. В итоге все нормально, все работает. Но проблема была выявлена. Невозможно добавить пакет от npm. Например vue -датчик.

Как добавить пакет?

Вот код:

HTML: 

<code><!doctype html>
<!-- Note that adding an appcache really speeds things up after the first load
    You need to amend the appcache file to meet your needs.
    Don't forget to change the appcache file if you update ANY
    of the files in it otherwise the old versions will ALWAYS be used.
<html lang="en" manifest="./uibuilder.appcache">
-->
<html lang="en">
<!--
    This is the default, template html for uibuilder.
    It is meant to demonstrate the use of VueJS & bootstrap-vue to dynamically
    update the ui based on incoming/outgoing messages from/to the
    Node-RED server.

    You will want to alter this to suite your own needs. To do so,
    copy this file to <userDir>/uibuilder/<url>/src.
-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>Node-RED UI Builder</title>
    <meta name="description" content="Node-RED UI Builder - VueJS + bootstrap-vue version">

    <link rel="icon" href="./images/node-blue.ico">

    <link rel="manifest" href="./manifest.json">
    <meta name="theme-color" content="#3f51b5">

    <!-- Used if adding to homescreen for Chrome on Android. Fallback for manifest.json -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Node-RED UI Builder">

    <!-- Used if adding to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Node-RED UI Builder">

    <!-- Homescreen icons for Apple mobile use if required
        <link rel="apple-touch-icon" href="./images/manifest/icon-48x48.png">
        <link rel="apple-touch-icon" sizes="72x72" href="./images/manifest/icon-72x72.png">
        <link rel="apple-touch-icon" sizes="96x96" href="./images/manifest/icon-96x96.png">
        <link rel="apple-touch-icon" sizes="144x144" href="./images/manifest/icon-144x144.png">
        <link rel="apple-touch-icon" sizes="192x192" href="./images/manifest/icon-192x192.png">
    -->

    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />

    <link type="text/css" rel="stylesheet" href="./index.css" media="all">
    <!--<script type="tex/javascript" src="https://cdn.jsdelivr.net/npm/vue-datetime@1.0.0-beta.11/dist/vue-datetime.min.js"></script>-->
    <!--<script type="tex/javascript" src="https://moment.github.io/luxon/amd/luxon.js"></script>-->
    <!--<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-datetime@1.0.0-beta.11/dist/vue-datetime.min.css">-->
     <!-- <link href="../uibuilder/vendor/air-datetimepicker/dist/css/datepicker.min.css" rel="stylesheet" type="text/css"> -->

</head>
<body class="bg-dark">
    <div id="app" v-cloak>
        <b-container id="app_container" class="container">
            <div class="card shadow mb-4 mt-2">
                <div class="card-header">
                    <span class="h3 text-primary">Данные по датчику</span>
                </div>
                <div class="card-body">
                    <div class="row mt-2">
                        <span class="label my-2 h-4">Название датчика:</span>
                         <select ref="selectSensor" class="form-control" v-on:input="sensorChange">
                            <option ref="optionForRemove" value="">Выберите датчик</option>
                            <option value="1111/Temperature/t1">Температура 1</option>
                            <option value="1111/Temperature/t2">Температура 2</option>
                            <option value="1111/Temperature/t3">Температура 3</option>
                        </select>
                    </div>
                    <div class="row mt-2">
                        <div class="col-6">
                            <input type='text' class="datepicker-here" data-position="right top" />
                        </div>
                        <div class="col-6"></div>
                    </div>

                </div>
                <div class="card-footer">
                    <div class="row mt-2">
                        <pre v-html="hLastRcvd" class="w-100 syntax-highlight">

1 Ответ

0 голосов
/ 23 марта 2020

Когда пакет доступен на npm, вы также можете получить его через jsdelivr CDN: https://www.jsdelivr.com/.

Например, для vue -datepicker, используйте: https://cdn.jsdelivr.net/npm/vue-datepicker/ -> Это даст вам список доступных файлов.

Используйте https://cdn.jsdelivr.net/npm/vue-datepicker/ имя файла и добавьте его как скрипт добавьте тег к нижней части индекса вашего uibuilder. html вот так: <script src="https://cdn.jsdelivr.net/npm/vue-datepicker"></script>

После этого вы можете использовать его в индексе. js.

...