概要
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のコードを開発環境に落として実装する方法は記述がなかった為、この環境を作るのに凄く苦労しました。今後もソース元のコードを落として、開発環境に導入する事はありそうなので、とても勉強になりました。