🌟

Vue3.js(Tauri vue3 element-plus) から始めるディスクトップアプリ #8[element-plusの導入]

2023/07/16に公開

Vuetify

はじめに

前回まではVuetify3.0を導入しようと考えてました。少し使ってみて、相対的にUIコンポーネント数が少なく、また機能不足感が否めない（2023.07現在）。
そこで、UI Frameworkを変更したくなりました。

上記を参考にさせていただきました。選択肢があまり多くないですが、MITライセンスのelement-plusから試してみようと思います。
DBの結果表示をするアプリを開発しますので、Virtualized Tableの機能で決めました。

Step1　新プロジェクトの作成

まずは、新規プロジェクトの作成します。
下記の要領でプロジェクトを新設します。

$ yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@4.4.0" with binaries:
      - create-vite
      - cva
√ Project name: ... プロジェクト名
√ Package name: ... プロジェクト名
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in D:\Project\tauri\プロジェクト名\プロジェクト名...

Done. Now run:

  cd 
  yarn
  yarn dev

Done in 45.14s.

Project name:　好きなプロジェクト名を入力してください。
Package name: 好きなパッケージ名を入力してください。
Select a framework: » vanillaがデフォルトです。今回は、Vueを選択しました。
Select a variant: » TypeScriptを選択しました。お好みで。

アプリの起動

  cd プロジェクト名
  yarn
  yarn dev

と順番に入力します。

$ cd プロジェクト名/
$ yarn
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 20.74s.

$ yarn dev
yarn run v1.22.19
$ vite

  VITE v3.2.4  ready in 249 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

http://localhost:5173/

ここまでで、Viteを利用したvue3の動作環境です。

Step2　element-plusの導入

上記で作成したプロジェクトにelement-plusを導入します。

$ yarn add element-plus
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 20 new dependencies.
info Direct dependencies
└─ element-plus@2.3.8
info All dependencies
├─ @ctrl/tinycolor@3.6.0
├─ @element-plus/icons-vue@2.1.0
├─ @floating-ui/core@1.3.1
├─ @floating-ui/dom@1.4.5
├─ @popperjs/core@2.11.7
├─ @types/lodash-es@4.17.8
├─ @types/lodash@4.14.195
├─ @types/web-bluetooth@0.0.16
├─ @vueuse/core@9.13.0
├─ @vueuse/metadata@9.13.0
├─ @vueuse/shared@9.13.0
├─ async-validator@4.2.5
├─ dayjs@1.11.9
├─ element-plus@2.3.8
├─ escape-html@1.0.3
├─ lodash-es@4.17.21
├─ lodash-unified@1.0.3
├─ lodash@4.17.21
├─ memoize-one@6.0.0
└─ normalize-wheel-es@1.2.0
Done in 5.28s.

アプリの起動の準備をします。

main.ts の修正

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(ElementPlus);
app.mount("#app");

app.vue をサンプルと入れ替えてしまいます。

<template>
  <el-table-v2
    :columns="columns"
    :data="data"
    :width="700"
    :height="400"
    fixed
  />
</template>

<script lang="ts" setup>
const generateColumns = (length = 10, prefix = "column-", props?: any) =>
  Array.from({ length }).map((_, columnIndex) => ({
    ...props,
    key: `${prefix}${columnIndex}`,
    dataKey: `${prefix}${columnIndex}`,
    title: `Column ${columnIndex}`,
    width: 150,
  }));

const generateData = (
  columns: ReturnType<typeof generateColumns>,
  length = 200,
  prefix = "row-"
) =>
  Array.from({ length }).map((_, rowIndex) => {
    return columns.reduce(
      (rowData, column, columnIndex) => {
        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
        return rowData;
      },
      {
        id: `${prefix}${rowIndex}`,
        parentId: null,
      }
    );
  });

const columns = generateColumns(10);
const data = generateData(columns, 1000);
</script>

Step3　起動

起動したかな？

お疲れさまでした。

あとがき

Tauriは別途導入してください。
参考にしていただければ幸いです。誤った記述などあれば教えてください。