プレーンなVueのプロジェクトでルーティングを行いたい場合、Vue Routerモジュールを使用します。 router.vuejs.org このモジュールでは、静的なURLはもちろん、動的なURLを扱う事ができます。 動的なURLというのは、例えば次のような使い方です。 ユーザー…

Vue CLIで作成したプロジェクトでは、初期設定のエントリーポイントは隠蔽されています。 今回は、初期設定されているエントリーポイントを変える方法について記載します。 環境 モジュール名 バージョン @vue/cli 4.4.6 【Tips】 Vue CLI 4系を使う場合の注…

webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 TypeError: loaderContext.emitError is not a function ソース ハブ…

webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 [Vue warn]: You are using the runtime-only build of Vue where the…

webpackの構成を作成していた時の備忘録です。 今回は、stylusからcssにコンパイルする過程で発生する現象ですが、cssでもsass(scss)でも発生しうる事象です。 また、mini-css-extract-pluginでcssファイルを外部出力する場合でも同じ現象が起こります。 web…

webpackの利点として、コンパイルしたスクリプトの容量を抑えてくれる機能が用意されています。 とはいえ、単純にwebpackを使うだけであれば触れる機会は少ない機能だと思います。 今回は、コードの圧縮方法について触れたいと思います。 webpackのライブラ…

フロントエンドで遷移するイベントを実装する時があります。 最近では、イベントを発火させるボタン要素をdivタグで用意するドキュメントを見ます。 もちろん、全てdivでも何ら問題はありません。 しかし、何かしら遷移が発生する場合は、（好みの問題ではあ…

静的ページで構成されるページであっても、なるべくならテンプレートエンジンを使用して作りたいものです。 今回は、Pugテンプレートについて取り上げます。 pugjs.org Pugについては別の機会にするとして、webpackでコンパイルするための設定について記載し…

LaravelはフロントエンドコンパイルをするためのツールとしてLaravel Mixが導入されています。 laravel.com 初期状態でも十分使いやすいのですが、機能が多いプロジェクトの場合ではそのままでは使いづらいところがあります。 例えばページ毎に別のスタイル…

無償IDEで且つ軽いと言われているVisual Studio Code(VSCode) を触る機会がありました。 (※諸説あります。) 初期状態では英語ですので、日本語にする方法について記載します 環境 Macで使う想定ですが、Windowsでも手順は同じようです。 OS バージョン mac 1…