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.jsが 50MBとかになりました。ローカルでも鬼のように遅いです。
そこで、ElementUIのホームページを見ながらカスタムCSSファイルを作ろうとしたところ、ハマりました。
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-utilはgulp4がリリースされたため、非推奨らしいです。
こちらのサイトを手がかりに、一つ一つ潰していっても良いのですが、どうしましょうか。
とりあえず、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)
投稿記事のカテゴリやタグと同じ記事をランダム表示します。