メモ

Node-RED と Vue 3 が連携したプロジェクトに初期表示のコンポーネントと Milligram を導入するメモ

Posted on by seigo

Node-RED と Vue 3 が連携したプロジェクトに初期表示のコンポーネントと Milligram を導入するメモです。

やりたいこと

Node-RED と Vue 3 が連携したプロジェクトに初期表示のコンポーネントと Bootstrap を導入するメモ

こちらでは Bootstrap を導入しました。

ですが、私の場合、もっと最小限のスタイル設定で作っていきたいときに Milligram という CSS フレームワークを使うことがあるので、それも導入してみます。

Vue のプロジェクトに移動

Node-RED のプロジェクト内で Vue CLI 4 で作った Vue 3 を動かすメモ

をベースに進めます。

cd vue-node-red-view

Vue のプロジェクトを設定するため vue-node-red-view フォルダに移動します。vue-node-red-view は、さきほどの記事でつくった私のプロジェクト名なので、読み替えてください。

Milligram 本体を入れる

npm i milligram

Bootstrap の導入と同じように Milligram をインストールします。 2021/09/09 時点で milligram@1.4.1 でした。

main.js を編集

vue-node-red-view/main.js を編集します。

import { createApp } from 'vue'
import App from './App.vue'
 
import 'milligram'
 
createApp(App).mount('#app')

最初に生成された main.js に import 'milligram' だけ加えます。

NodeRED コンポーネント作成

vue-node-red-view/components/NodeRED.vue を新規作成して、以下のように記述します。

<template>
  <div class="row">
    <div class="column">
      <div class="row">
        <div class="column">
          <h1>{{infoTitle}}</h1>
        </div>
      </div>
      <div class="row">
        <div class="column">
          <ul>
            <li>An item</li>
            <li>A second item</li>
            <li>A third item</li>
            <li>A fourth item</li>
            <li>And a fifth one</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'NodeRED',
  props: {
    msg: String
  },
  data () {
    return {
      infoTitle: "Node-RED INDEX"
    }
  },
  methods: {
 
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

Milligram はドキュメントもシンプルで、シンプルなHTMLをいくつか持ってきています。

App.js 修正

vue-node-red-view/App.js を NodeRED コンポーネントを呼び出すように編集します。

<template>
  <div class="container">
    <NodeRED/>
  </div>
</template>
 
<script>
import NodeRED from './components/NodeRED.vue'
 
export default {
  name: 'App',
  components: {
    NodeRED
  }
}
</script>
 
<style>
/*
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
*/
</style>

今回も Bootstrap と同じく #app に当たっていた初期生成の CSS 定義は Milligram と競合しないように、一旦コメントアウトで外しています。

検証してみる

npm run serve

で確認します。

image

<h1>{{infoTitle}}</h1> でデータバインディングしていた infoTitle という値が Node-RED INDEX に置き換わっていて Vue のテンプレート構文もしっかり動いています。

これで、初期表示のコンポーネントを変更できました。

ビルドする

npm run build

いよいよ、Node-RED 側の node-red-static フォルダにビルドします。

Node-RED を起動して確認してみる

cd ..

で、Vue のプロジェクトフォルダから一つ上の階層に上がって

npm run node-red

で、Node-RED を起動して確認してみましょう。

image

無事、http://127.0.0.1:18801/ でも、同様の表示が確認できました！

、、
seigo