僕がVueで使用している便利パッケージを教えます!

2019/06/28 2019/06/28 #Vue #axios #cropper #AdSense #Bootstrap

Vueで使える!便利なパッケージ一覧

最初に

これ、ちゃんと一つずつ説明しながら記事にしたい。
なので、この記事はとりあえず作成したみたいな感じです。

Vue-CropperJs


前に書いたCropper.jsのVue版ですね。
Vueはラップするのも得意なので、こういうバニラで書かれたライブラリをVue化するというプロジェクトは結構見かけますし、多いですね。

が存在しますので、用途によって使うものを選択すればいいですよ。

ちなみにこの

や最近公開された
ogp
ツーマッチ

ツーマッチを見る

でもこの技術は採用されています。

non's Labo

スクリーンショット 2019-07-14 18.37.41.png

ツーマッチ

スクリーンショット 2019-07-14 18.39.04.png

Vue-Google-AdSence


これは
ogp
今年の抱負メーカーの記事

今年の抱負メーカーの記事を見る

で少し触れましたね。
Vueを導入すると、Vueの中にプレーンなjavascriptを記載することはできますが、外部スクリプトを記載(WEB上で読み込んだり)は怒られてしまいます。そこで、このプロジェクトができたのでしょう。

<!-- Google Ads -->
<div class="text-center">
    <Adsense
        data-ad-client="ca-pub-5315745554235923"
        data-ad-slot="6372572820"
        data-ad-format="horizontal"
    ></Adsense>
</div>

こんな感じで広告表示をすることができます。

vue-tags-input


これはタグ機能の操作に便利。
簡単に言えばQiita風にタグ付けができるようになります。

スクリーンショット 2019-07-14 18.57.11.png

これのおかげで記事を書くのも簡単です。

toast-ui/vue-editor

ご存じですか??
とんでもない量のUIを作成し、配布しているプロジェクトなんですが、この中にめっちゃくちゃ優秀なMarkdownエディタが存在します。
ogp
@toast-ui/vue-editor

@toast-ui/vue-editorを見る


ogp
toast-ui

toast-uiを見る

のページ言ってDEMO触ってきたらわかる。
やばい。しかもそれをVueに落とし込む始末。
そのうち有料になりそうで怖いですね。
スクリーンショット 2019-07-14 19.01.17.png

bootstrap-vue


これはかなり有名ですね。Bootstrapで書かれたコンポーネントを簡単に呼び出す事ができます。記述量が多くなってしまいがちでしたが、この子のおかげで完結にまとまりますね。

少し前まで、日本語入力のバグがありましたが、それも解決されているようです。

Vuetify


これもかなり有名。マテリアルデザインがすごい使いやすい。PWA向きですね。
でも、正直そこまで詳しくはない。

vue-axios


これがないと、なんのためにVueでアプリ作ろうと思ったの??ってなるレベル。

最後に

  • Vue-CropperJs
  • toast-ui/vue-editor
  • vue-tags-input

についてはそのうち時間ができたら纏め直そうと思う。
本当に便利なので、今後もお世話になりそうですし、宣伝しておきたい。
こういうの嫌う人もいるけど、効率化を本気で求めるなら、できている物は使わないとね。

のん

名刺 : About me.

YouTube : のんラボ

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#のんラボ #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4 #pixel 5 #レビュー #スマレコ #TDD #RSS #404 #高山ダム #ラーツー #React #Nuxt #node_modules #エラー #インポート #設定方法 #環境構築 #Docker #フォレストパーク神野山 #学生向け #PR #採用 #Node.js #npm #しまなみ海道 #youtube #CSS #IE #SLA #Rust #千里浜なぎさドライブウェイ #千里浜 #インサイドセールス #曽爾高原 #無線LAN #ポートフォリオ #バルカンS #納車 #Next.js #チームビルディング #リーダー #悩み #Github Actions #Marp #ネタ #サーバー移行 #S3 #ストレージサーバー #RFC 7807 #Digest #認証 #Xdebug #CLI #西日本 #例外