はじめに
Vue.js プロジェクトで vue-svg-loader を使って SVG ファイルを描画する方法について整理した。
TL;DR
npm i -D vue-svg-loaderでvue-svg-loaderをインストールvue.config.jsに設定を追加xxxx.vueでimportしてcomponentsに登録して<YourSvgIcon />で描画
はじめに
Vue.js で FontAwesome を使う方法について整理した。
TL;DR
- npm で FontAwesome 関連のパッケージをインストール
new Vueする前にライブラリのインポートと使用するアイコンの設定<font-awesome-icon :icon="[]" />タグで表示
はじめに
Vue.js を使って Chrome 拡張機能を開発する方法について簡単に整理した。
前回の記事 では、Kocal/vue-web-extension を使った Chrome 拡張機能の開発方法について調べた。が、「Kocal/vue-web-extension では Popup Page や Options Page で Vue.js を使うもの」、つまり「メインページ(メインコンテンツ?)側では使えないもの」という結論に至った。(※自分の中では、の話)
冷静に考えて「メインページ側に使えないわけがない」と思って、どのようにすれば実現できるかについて調査した。
実際に拡張機能を作ってリリースした話 : Vue.js を使ってChrome 拡張機能を作った話(はてなブックマークのコメントを Qiita 記事内に表示) - Qiita
TL;DR
vue.config.jsを用意してvue-cli-serviceでビルドすれば動作することを確認manifest.jsonではchunk-vendors.jsを先に読み込む- minify とか css preprocessor とかはまだ調べきれてない
はじめに
Git を使った開発をしていて package-lock.json でコンフリクトが発生した時の解決方法のメモ。
TL;DR
package-lock.jsonのコンフリクトはnpm installすれば解決できる
はじめに
PHP ファイルを Git リポジトリに登録(commit)する時に、PHP-CS-Fixer で自動整形を必須にする方法を調べた。
.git/hooks/pre-commit でも実現できるが、できればチームメンバー内で共有したい(git clone (してゴニョゴニョ)するだけで使えるようにしたい)ので、もう少し突っ込んで調べてみた。
TL;DR
husky+lint-staged+php-cs-fixerでコミット時の自動整形を実現可能huskyを使うと、package.jsonで クライアントサイドの Git hooks(pre-commit など)を利用できるlint-stagedを使うと、ファイル種別ごとにコマンドを実行できるhusky+lint-stagedで、*.phpの commit 時にphp-cs-fixerを実行する
はじめに
実際にパッケージをインストールすることなく、package.json に良い感じで依存関係を追加する方法が無いか調べた。
※AWS Lambda の開発で docker-lambda に渡す package.json を手で書きたくなかった。
参考: docker-lambda を使って AWS Lambda Function を開発する方法
TL;DR
- npm-add-dependencies を使えば OK
- 標準コマンドでは対応不可
npm install -g npm-add-dependenciesでインストールnpm-add-dependencies <package>でpackage.jsonに追記
