ElementUI

2020年4月20日

ElementUIを使う

Vue.js で、「見栄えの良いUIにしたいなー」と思って調べていると、「ElementUI」が良いと書かれていました(山田 2019, p.258)。

早速、ElementUIをnpmでインストールしました。

npm i element-ui -S

そして、main.jsを編集。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

ちなみに、デフォルトは中国語らしいので、日本語に直す必要があります。
(ダイアログなどがChineseになってしまう。)

The default language of Element is Chinese. If you wish to use another language, you’ll need to do some i18n configuration. In your entry file, if you are importing Element entirely:

https://element.eleme.io/#/en-US/component/i18n
import locale from 'element-ui/lib/locale/lang/ja'
Vue.use(ElementUI, { locale })

そして、カスタムテーマをSCSSで作れるようだったので、ちらっとファイルを作って、ビルドしたところ、webpackで生成されるindex.js50MBとかになりました。ローカルでも鬼のように遅いです。

そこで、ElementUIのホームページを見ながらカスタムCSSファイルを作ろうとしたところ、ハマりました。

element-themeのインストール(に失敗)

npmでさっとインストールします(公式ホームページでは、グローバルにインストールせよと書かれていますが、GitHubではプロジェクト内にインストールしていますね)。

npm i element-theme -D
npm i element-theme-chalk -D

そして、et -i と打つと、SCSSファイルが生成されるとあるのですが、ここでエラー。

const { Math, Object } = primordials;
                         ^

ReferenceError: primordials is not defined

なんのことやら。

ググってみたところ、gulpとのバージョンが合わないとか。
Gulp実行でエラーが出力

とりあえず、依存関係を確認。npm audit を打ちます。

すると、いくつかのファイルが依存関係でエラーを吐いています。みてみたら、すべて「element-theme」に関わるものでした。

そういえば、element-theme の導入時に大量のエラーを吐いていた気がします。

npm i element-theme -D
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated gulp-util@2.2.20: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated graceful-fs@2.0.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
+ element-theme@2.0.1

まず、頭に出てきたgulp-utilですが、こいつが、ネックなのかなと。gulp-utilgulp4がリリースされたため、非推奨らしいです。

脆弱性の警告を受けたnpmパッケージの依存関係を力技で直す

こちらのサイトを手がかりに、一つ一つ潰していっても良いのですが、どうしましょうか。

パッケージを1つ1つ確認するも、うまくいかず・・・

とりあえず、Gulpをインストール

npm i gulp -D
+ gulp@4.0.2
et -i            
fs.js:27
const { Math, Object } = primordials;
                         ^

ダメですね。1つ1つ消していきましょう。

まずは、clean-css

とりあえず、npmで最新版をインストール。
Path          │ element-theme > gulp-cssmin > clean-css
とあるので、プロジェクト下node_modulesのgulp-cssminからclean-cssフォルダを削除。

npm dedupeして、npm audit したら、問題が1つ減っているのが分かります。

と、うまくいっているように見えたのですがnpm i で別のパッケージをインストールしたら、再度アラートが出るように・・・。賽の河原状態・・・。

結局、今回は「et」コマンドで初期ファイルをいじるのは止めました。
今のところ、問題はないですが・・・対策を考えます。

とらいえず、WEB上でカスタムテーマを作成するのが良いでしょうか。

参考文献

山田祥寛 2019 『これからはじめるVue.js実践入門』SBクリエイティブ.(Amazon


 カテゴリ一覧

 雑談(170)
アニメ(19)/ゲーム(12)/ドラマ(3)/パソコン(33)/小説(3)/広島東洋カープ(16)/映画(11)/漫画(33)/音楽(61)
 製作記(89)
AI(4)/CakePHP(3)/CentOS(4)/JavaScript(JS)(9)/Nuxt.js(4)/Vue.js(18)/WordPress(23)/料理(10)