はじめに
VueCLIのメジャーバージョンアップが行われました。
新しいCLIはプラグインアーキテクチャが採用され、今までの操作方法と変わっています。
詳しくは別記事にセットアップ方法を記載しましたので、そちらを参照ください。
Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)
Element UI とは
ElementUIは、vue.js用のUIコンポーネントライブラリです。
(React/Angular用のElementUIについても現在開発中とのことです)
レイアウトやモーダルウィンドウ、デートピッカーやボタン・入力テキスト、モーダルウィンドウなど、たくさんの種類のコンポーネントを「el-button」「el-checkbox」などのHTML拡張タグをTemplateに記述するだけで使用することが出来ます。
Element UI の導入
２パターンのインストール方法
Vue CLI3からは、プラグイン形式でライブラリを導入・管理することになります。
ElementUIも、「vue-cli-plugin-element」プラグインが用意されています。
プロジェクトへのプラグインの導入方法は２パターンあります。
① コマンドラインで導入
② GUI(ベータ版)で導入
今回はコマンドラインでのインストールを説明します。
コマンドラインでのインストール
プロジェクトディレクトリに移動して、プラグイン導入の「vue add」コマンドを実行してください。
$ vue add element
以下の画面が表示されます。
📦 Installing vue-cli-plugin-element...
yarn add v1.6.0
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-element@1.0.0
info All dependencies
└─ vue-cli-plugin-element@1.0.0
✨ Done in 6.78s.
✔ Successfully installed plugin: vue-cli-plugin-element
? How do you want to import Element? (Use arrow keys)
❯ Fully import
Import on demand
「How do you want to import Element?」
エレメントをどのようにインストールしたいかを確認されます。
「フルインストール」と「オンデマンドインストール」のいずれかを選択します。
フルインストールは全てのエレメントコンポーネントをプロジェクトに取り込むことが出来ます。
オンデマンドインストールの場合は、必要なエレメントコンポーネントのみをインストールしてプロジェクトサイズを小さくすることが出来ます。
その場合、別途「babel-plugin-component」をインストールする必要があります。
今回は「フルインストール」を選択してEnterします。
? How do you want to import Element? Fully import
? Do you wish to overwrite Element's SCSS variables? (y/N)
「Do you wish to overwrite Element's SCSS variables?」
ElementUI用のSCSS変数を上書きするかどうか確認されます。
今回は「y」を入力します。
? How do you want to import Element? Fully import
? Do you wish to overwrite Element's SCSS variables? Yes
? Choose the locale you want to load (Use arrow keys)
❯ zh-CN
zh-TW
af-ZA
ar
bg
ca
cs-CZ
(Move up and down to reveal more choices)
「Choose the locale you want to load」
読み込みたいロケール設定を選択します。上下キーで使用したいロケールを選んでEnterを押してください。
今回は「ja」日本を選択します。
? How do you want to import Element? Fully import
? Do you wish to overwrite Element's SCSS variables? Yes
? Choose the locale you want to load ja
🚀 Invoking generator for vue-cli-plugin-element...
📦 Installing additional dependencies...
yarn install v1.6.0
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
✨ Done in 8.05s.
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-element
The following files have been updated / added:
src/element-variables.scss
src/plugins/element.js
package.json
src/App.vue
src/main.ts
You should review these changes with git diff and commit them.
上記画面が表示されれば完了です。
以下のコマンドでプロジェクトを開始させて画面表示させてみましょう。
$ yarn run serve
Vueのロゴの下に、ElementUIが表示しているメッセージが表示されていれば無事にインストールは成功していますので、Elementを使用した画面実装を行うことが可能となりました。
プラグインをインストールすることで追加・更新されるファイル
プラグインを導入した場合、ライブラリが追加されるだけでなく、すぐに使用出来るようにプロジェクト内のファイルが追加・更新されます。
プロジェクト内のどのようなファイルが追加・更新されたのか確認してみましょう。
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import './plugins/element.js';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
「import './plugins/element.js';」
プラグインディレクトリの「element.js」のインポート文が追加されています。
import Vue from 'vue'
import Element from 'element-ui'
import '../element-variables.scss'
import locale from 'element-ui/lib/locale/lang/ja'
Vue.use(Element, { locale })
プラグインを導入することで新しく生成されたファイルになります。
インストール時の設定内容に従って「element-variables.scss」「element-ui/lib/locale/lang/ja」がインポートされ、VueアプリケーションでElementを使用可能な状態に設定しています。
/*
Write your variables here. All available variables can be
found in element-ui/packages/theme-chalk/src/common/var.scss.
For example, to overwrite the theme color:
*/
$--color-primary: teal;
/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
こちらも、プラグインを導入することで新しく生成されたファイルになります。
プライマリカラー/フォントパスの変数指定とテーマスタイルをインポートしています。
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<p>
If Element is successfully added to this project, you'll see an
<code v-text="'<el-button>'"></code>
below
</p>
<el-button>el-button</el-button>
</div>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Element導入成功の文言と「el-button」が追記されています。
さいごに
今回、はじめてプラグインの導入を行いました。
NPMでライブラリを導入する場合と比べると、ライブラリの導入＋使用するために必要なファイルまで自動的に生成・更新してくれることは、設定のちょっとした間違いで起動しないなどの面倒な手間が省略されるため非常に良いなと感じました。
現時点でプラグイン対応されているライブラリは、まだ少ない状況ですが、今後Vue.jeを扱う上で主流になってくると思いますので、どんどん活用していきたいと思います。
まだ、ベータ版提供となりますがGUI版では、プラグインの導入とプラグインの検索・管理なども出来るとのことですので、そちらにもチェレンジしていきたいです。