ElementUI

📢 この記事は gemini-2.5-flash によって翻訳されました

ElementUIは、餓了么（Ele.me）チームが開発した、開発者、デザイナー、プロダクトマネージャー向けのVue2.0ベースのデスクトップUIコンポーネントライブラリだよ。

コンポーネントってのは、ハイパーリンク、ボタン、画像、テーブル、フォーム、ページネーションバーみたいに、ウェブページを構成するパーツのことね。

Vue3.x 公式サイト： https://element-plus.org/zh-CN/#/zh-CN

ElementUIのインストール

ElementUIライブラリをインストールするよ（現在のプロジェクトディレクトリで）。コマンドはこれ。

`1`	`npm install [email protected]`

ElementUIコンポーネントライブラリの読み込み

1
2
3
4
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

入門的な使い方

src/views/element/elementView.vueコンポーネントを作成して、公式サイトからコードをコピーする感じね。例えばこんな風に。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <div>
        <!-- ボタン -->
        <el-row>
            <el-button>デフォルトボタン</el-button>
            <el-button type="primary">主要ボタン</el-button>
            <el-button type="success">成功ボタン</el-button>
            <el-button type="info">情報ボタン</el-button>
            <el-button type="warning">警告ボタン</el-button>
            <el-button type="danger">危険ボタン</el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

App.vueでコンポーネントをインポート

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<template>
  <div id="app">
    <element-view></element-view>
  </div>
</template>

<script>
import elementView from './views/element/elementView.vue'
export default {
  components: { elementView },
}
</script>

<style></style>

他のコンポーネントについても、こんな感じだよ。

Axiosのインポート

インストール

1
npm install axios

インポート

1
import axios from 'axios';

Vue ルーティング

Vue RouterはVueの公式ルーティングだよ。構成要素はこれね：

VueRouter：ルータークラスで、ルーティングリクエストに基づいてルーティングビューに選択されたコンポーネントを動的にレンダリングするやつ。
<router-link>：リクエストリンクコンポーネントで、ブラウザがリンクタグとして解析するよ。
<router-view>：動的ビューコンポーネントで、ルーティングに対応するコンポーネントを表示するために使うんだ。

Axiosのインストール

コマンド

`1`	`npm install [email protected]`

ルーティングの定義

src/router/index.jsで

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView // 上でのインポート方法
  },
  {
    path: '/emp',
    name: 'emp',
      // 直接インポートする方法
    component: () => import('../views/tlias/empView.vue')
  },
  {
    path: '/redirect',
      // リダイレクト
    redirect: '/emp'
  }
]

使い方

使いたい場所で

1
<router-link to="/dept">部署管理</router-link>

App.vueで

1
2
3
4
5
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

main.jsで

1
2
3
4
5
6
import router from './router'

new Vue({
  router, // ルーティングを使う
  render: h => h(App)
}).$mount('#app')

ビルドとデプロイ

コマンド

1
npm run build

コマンド実行が終わったらdistディレクトリが生成されるから、そのディレクトリのファイルをデプロイすればOKだよ。