Vue.js3で使用する方法

Vue.js3アプリケーションでは、次の手順でInputManJSのコンポーネントを使用することができます。

• create-vueを利用して、Vue.jsアプリケーションを作成します。(プロジェクト名はinputmanjs-vue3とします。)

  npm init vue@3

• アプリケーションプロジェクトのフォルダに移動します。

  cd inputmanjs-vue3

• InputManJSのVue.jsパッケージをインストールします。

  npm install @mescius/inputman.vue

• src/App.vueファイルで、InputManJSのスタイルとGcTextBoxコンポーネントをインポートし、テンプレートに配置します。

  <script setup>
  //GcTextBoxComponentをインポートします。
  import { GcTextBoxComponent } from "@mescius/inputman.vue";
  </script>
  
  <template>
    <GcTextBoxComponent ></GcTextBoxComponent>
  </template>
  
  <style>
  /* InputmanJSのCSSをインポートします。*/
  @import "@mescius/inputman/CSS/gc.inputman-js.css";
  </style>

• src/App.vueファイルで、GcTextBoxコンポーネントのtextプロパティとtextchangedイベントを設定します。

  <script setup>
  //GcTextBoxComponentをインポートします。
  import { GcTextBoxComponent } from "@mescius/inputman.vue";
  
  //textプロパティに割り当てる値を設定します。
  const textValue = 'テキスト';
  
  //textChangedイベント用の関数を定義します。
  const textChanged = (sender) => console.log(`テキストは"${sender.text}"に変更されました。`) ;
  </script>
  
  <template>
    <GcTextBoxComponent :text="textValue" @ontextchanged="textChanged"></GcTextBoxComponent>
  </template>
  
  <style>
  //InputmanJSのCSSをインポートします。
  @import "@mescius/inputman/CSS/gc.inputman-js.css";
  </style>
  
  

• Vue.jsアプリを実行します。

  npm run dev