概要

　Element UiをCDNで使用していた際、ソース元の不具合により、CDNが使用できなくなり、画面が表示されない不具合が発生しました。この問題を防ぐ為、CDNで読み込んでいるElement Uiのソースコードを開発環境に移植し、外的要因によるコンポーネントライブラリが使用できなくる問題を改善しました。
今回は、その方法について、備忘録も含めてご説明します。

Element Uiの概要

「Element Ui」は、Vue.js2系で使用できるコンポーネントライブラリです。汎用性の高いUi(ユーザーインターフェース)のコンポーネントがたくさん用意されています。
（ユーザーインターフェースとは、ボタンやダイアログ等をユーザーが操作しやすいようにする部品を意味する)

Element Ui 公式ドキュメント
https://element.eleme.io/

今回の開発環境

vue.jsは、CDNで実装
Element Uiは、ソース元のコードをローカル環境に複製

今回の開発環境のディレクトリー構成

使用するディレクトリーとファイルのみを記載しています
※ 記載していないディレクトリーやファイルは、必ず消さずに残しておく

.
├── element_ui/
│   └── lib/
│       ├── theme-chalk/
│       │   └── index.css
│       ├── umd/
│       │   └── locale/
│       │       └── ja.js
│       └── index.js
├── .gitignore
├── index.html
└── README.md

構築手順

1. Element Uiのコードをダウンロード

　下記のgit hubからgit clone または zipファイルにて、コードをローカル環境に複製して下さい。
（筆者は、zipファイルでローカル環境に落としています)

2. Element Uiをインポートする

ローカル環境に移植したElement Uiを読み込ませます。最初に、htmlファイルのheadタグにindex.cssを読み込ませるコードを記述します。

<!-- Element Uiのcssを読み込 -->
<link rel="stylesheet" href="element_ui/lib/theme-chalk/index.css" />

次に、bodyタグの下に、下記の二つのscriptタグを記載して、index.js、ja.jsを

<!-- Element Uiのimport -->
<script src="element_ui/lib/index.js"></script>

<!-- Element UIを日本語化する為に使用する -->
<script src="./element_ui/lib/umd/locale/ja.js"></script>

これまで説明した行程を全て行えば、CDNを使用しないで、Element Uiが使用できると思われます。

注意事項

ソースコードを直接開発環境に複製する為、バージョンの更新を自身で行う必要があります。
その事をご理解した上で、今回の実装方法を行なって下さい。

著者が構築した環境

　自信が実際に作成した環境をgit hubに上げましたので、もし確認したい事がありましたら、閲覧して頂ければと思います。

感想

公式ドキュメントを参照しても、Element Uiのコードを開発環境に落として実装する方法は記述がなかった為、この環境を作るのに凄く苦労しました。今後もソース元のコードを落として、開発環境に導入する事はありそうなので、とても勉強になりました。