www.dextsolution.com
DEXTUPLOAD
X5
製品の説明 > Vue.js > はじめに

# Vue.js はじめに

バージョン4.5.0.0から、DEXTUploadX5（以下 X5）は Vue.js 環境をサポートします。Vue.js で X5 を使用するには、dextuploadx5-vue パッケージを使用します。

この文書では、Vue 3 と Vite ベースの環境を基準として、X5 のリスト型 UI がブラウザに生成されるまでの最小構成を説明します。

パッケージの役割
  - dextuploadx5-vue: Vue.js で X5 を利用するためのプラグイン、UI コンポーネント、制御オブジェクトを提供します。
  - dextuploadx5-vue-vite: Vite 環境で X5 静的リソースをプロジェクトの静的パスに配置しやすくする補助パッケージです。
  - dextuploadx5-express-handler: Express サーバーで X5 のアップロード要求を処理する際に使用するサーバー側ハンドラーパッケージです。
パッケージのインストール

      # クライアントプロジェクト
      npm install vue dextuploadx5-vue
      npm install -D vite @vitejs/plugin-vue dextuploadx5-vue-vite

X5 静的リソースの配置

  ブラウザは X5 の動作に必要なスクリプトとリソースを productPath を基準に読み込みます。そのため、このパスの下に実際の X5 製品ファイルが配置されている必要があります。

      import vue from "@vitejs/plugin-vue";
      import { defineConfig } from "vite";
      import { withDEXTUploadX5 } from "dextuploadx5-vue-vite";

      export default defineConfig({
        plugins: [
          vue(),
          ...withDEXTUploadX5()
        ]
      });

  上記のように設定すると、通常ブラウザは /dx5/ パスで X5 リソースにアクセスします。補助パッケージを使わない場合は、node_modules/dextuploadx5-vue/dist/dx5 を静的ファイルパスに直接コピーしてください。

認証キーと productPath の設定

      import { createApp } from "vue";
      import App from "./App.vue";
      import { DEXTUploadX5Plugin } from "dextuploadx5-vue";

      createApp(App)
        .use(DEXTUploadX5Plugin, {
          authKey: "jn+xziPdVh6f5KN17uFH... skip ...WiXAyO2FdI9r5XGfwxQ=",
          productPath: "/dx5/"
        })
        .mount("#app");

  productPath と実際の静的ファイル配置パスが一致しない場合、コンポーネントは正常に生成されません。

リスト型 UI の生成

      <script setup>
      import { ref } from "vue";
      import { DX5, DEXTUploadX5List } from "dextuploadx5-vue";

      const version = ref("");

      function handleCreated(id) {
        const dx = DX5.get(id);
        version.value = dx.getVersion();
      }

      function handleError(id, code, msg) {
        alert(id + " => " + code + "\n" + msg);
      }
      </script>

      <template>
        <DEXTUploadX5List
          id="dext5"
          :style="{ width: '100%', height: '320px' }"
          @created="handleCreated"
          @error="handleError"
        />
        <p>DEXTUploadX5 Version: {{ version }}</p>
      </template>