Help us understand the problem. What is going on with this article?

Nuxt.jsで未利用のVueコンポーネントを探すシェルスクリプト

最近Nuxt.jsでWebアプリを作ってるけど、
度重なる改修でVueコンポーネントが乱立。。

使ってないのもたくさんありそうなので、調べるスクリプトを作ってみた。

スクリプトはこんな感じ

#!/bin/bash

# vueコンポーネントの一覧を取得
FILES=`find components -name "*.vue"`
for i in $FILES; do
  #  全体からコンポーネントをインクルードしている行の数を取得
  NUM=`grep -r "$i" * | wc -l | sed -e "s:[^0-9]*::g"`

  # ファイル名と見つけた件数を表示
  echo "** ${NUM}: ${i}"

  # grepした結果を表示(確認用)
  grep -r "$i" * 
  echo ""
done

こんな感じで出力されるので、** 0:で始まるコンポーネントを削除していけばOK。

** 1: components/Hero.vue
pages/index.vue:import Hero from "~/components/Hero.vue";

** 0: components/OgpUserStock.vue

** 0: components/Card.vue

** 3: components/atom/TotalNumBooks.vue
pages/clip/_uid.vue:import TotalNumBooks from "~/components/atom/TotalNumBooks.vue";
pages/read/_uid.vue:import TotalNumBooks from "~/components/atom/TotalNumBooks.vue";
pages/stack/_uid.vue:import TotalNumBooks from "~/components/atom/TotalNumBooks.vue";

確認用にgrepの結果を出しているけど、コメントアウトしたり、

NUMが0件のときは、結果を表示しないようにすればいい感じ。

もしくは、| grep "** 0:"で結果をgrepするとかでもいいかも。

appとかディレクトリを変えてる場合

こんな感じにapp配下とかに場所を変えている場合は、

app/
  pages/
  components/

こんな感じで、findする場所を変えればOK♪

#!/bin/bash

FILES=`find app/components -name "*.vue" | sed 's:app/::g'`
for i in $FILES; do
  NUM=`grep -r "$i" app/* | wc -l | sed -e "s:[^0-9]*::g"`
  echo "** ${NUM}: ${i}"
  grep -r "$i" app/* 
  echo ""
done

以上!!

こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました!
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

kira_puka
フリーのエンジニア / 今はNuxt.jsが多め / いつかFlutterをやりたい 受託開発をしながら、アプリ・Webサービス・ゲームを個人開発 Kotlin/Python/Swift/Unity/Java/Haskell/DDD
https://memory-lovers.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした