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
```

Vue.js3で使用する方法