ざきの学習帳(旧 zackey推し )

日々の学びを書きます

【Vue.js】 @vuese/cli でコンポーネント一覧のドキュメントをサクっと生成・プレビューする

f:id:kic-yuuki:20191217135709p:plain

Vue Advent Calendar 2019 17日目の記事です。


16日目はgyarasuさんでした、お疲れ様でした!👏

この記事では@vuese/cli について、
導入までの手順を調査した際のメモを記載したいと思います。

  • @vuese/cli とは? 🤔
  • 導入手順
    • インストール・設定
    • *.vueファイルに説明をコメントで記載
      • グルーピング
      • 【注意】ドキュメント生成されない*.vueファイルがある
        • おまけ
    • ドキュメント生成→プレビュー
  • おわり
    • 参考文献
続きを読む

gridsome v0.7.11 で 「fatal error: 'vips/vips8' file not found」が発生した際に対処した方法

※雑メモ記事です。

環境

現象発生した際の環境となります。

  • macOS Mojave
  • node 13.1.0

概要 / 現象


久しぶりにGridsomeでサイトを作ろうと
gridsome create <project-name>とした 際、

../src/common.cc:25:10: fatal error: 'vips/vips8' file not found
#include <vips/vips8>
         ^~~~~~~~~~~~
1 warning and 1 error generated.

というエラーメッセージが発生しました。

ググってみると、
同じ(っぽい)現象に苦しんでいるIssueが散見されました。

対処した方法

Issueのスレッドを追ってみると、
どうやら libvips という画像処理関係のライブラリがインストールされていないとダメな様子。

以下で無事解決しました。

# libvipsのインストール(結構長い)
brew install vips

# node_modulesのクリア
rm -rf ./node_modules

# インストール・起動
npm install
npx gridsome develop

おわり

ほんとは真因まで追いたかったのですが、疲れたのでここまでです...orz。
g-imageあたりで使っているんだろうか?)

余裕があったら、真因まで調べたいと思います。

他、気づき点などありましたらフィードバックいただけると助かります。🙏

じぶん Release Notes ver 0.30.1

f:id:kic-yuuki:20191201115610p:plain

令和最初のアドベントカレンダーが始まりました!

この記事は、challenge-every-month Advent Calendar 2019 - Adventar
1日目の記事となります。

では、2019/11の取り組みの成果を書いていきます。

  • 開発・技術
  • 勉強会・コミュニティ
    • 勉強会
    • コミュニティ
  • プライベート
    • 記事(じぶんリリースノートを除く)
    • PV数
  • Challenge Every Month
    • 2019/11の結果
      • ❎技書博ブログで1記事以上書く
      • ❎せんべろDiscordに人を誘う
      • 🔺フェアレスチェンジを読破→ブログを書く
    • 2019/12の目標
  • おわりと所感
続きを読む

【Vue.js】VeeValidate v3.x の導入および使用例

追記
一休さんにて、実際にv2→v3にバージョンアップされた際の記事を出されました。

user-first.ikyu.co.jp

マイグレーションガイドとIssueを深掘り、詳しく書かれているので、目を通すことをお勧めします。


とある仕事でVeeValidateという、Vue.js用バリデーション系のライブラリを使っていて、
今度v2.x→v3.xのバージョンアップを行います。

github.com

この記事では、VeeValidate v3における導入方法・使用例をメモとして書き残しておきます。

続きを読む

【Vue.js】VueCLI3.x 4.xで環境変数を扱う場合は .env ファイルに VUE_APP_ の接頭語をつける

現在、とある開発でVueアプリケーションのリファクタリングを行なっています。

マイグレーション対象にはVueCLIも含まれており、2.x→4.xへのバージョンアップを行いました。

この記事では、マイグレーション作業中に気づいた、VueCLI4.x系の環境変数の扱いについて、書き留めておきたいと思います。

  • VueCLIとは?
  • 本編
    • 環境変数は .env に定義する
    • 接頭語「VUE_APP_」を付与する
  • おわり
続きを読む