イイダリョウのブログ。CLIをインストールしてみる(CDN、Nuxe.jsとの違い)JSVue.jsの続きです。前回はNuxt.jsで何ができるか調べました。CLIが未体験だったのでこちらのインストールをやってみます。CLIとNuxt.jsの違いこれまで、Vue.jsを利用するときに、CDNのリンクをしていた。この方法だと開発環境の構築が不要でCodePenなどでもすぐに体験できる。CodePen.右上のCodePenのアイコンをクリックするとCodePenの画面が開く。JSコード欄の左上の歯車アイコンを開くと下記のCDNリンクが設定されているのがわかる。CLIやNuxt.jsのインストールをした方が良さそう。Next.jsは前回も書いた通り、Vue.jsの拡張機能が全部入りでパッケージ化されている。CLIはVue.jsの拡張機能を必要最低限から任意で追加してインストールする。CLIで済ませる選択肢もあるのかな、と思い、先に体験することにした。devtools」をインストールしてみるWeb制作時にいつもChromeのデベロッパーツールで設定を確認したりしている。devtools」があることを知ったのでインストールしてみた。Devtoolsの導入方法と機能まとめ。右上に「Vue」というタブが追加されるようだ。Interfaceの略。CLIとはいわゆる黒い画面(Macではターミナル)のこと。※参考:https://academy.gmocloud.com/keywords/20170301/3997Vue.jsをコマンドで動かせるようにするツール。機能は結構多彩なようだ。Vue.jsフロントエンド界隈でよく見るキーワードがたくさんでワクワクしますねー。Nuxtとどう違うの?もうこれでいんじゃね?とも感じる。CLIとNuxt.jsの一番の違いはSSR(サーバサイドレンダリング)をするかどうか。ビルドしたファイルを設置すればよい。選択しておいてほぼ間違いない。できる程度には大変である。あるから優先度が低い」という理由でクローズされている。CLIも知っておこう。CLIを使うにあたりNode.js環境が必要。Node.jsが入っているか確認。ターミナルに下記のコマンドを打ってバージョン番号が表示されていれば入っている。-v入っていない場合はインストールをする。Qiitaそしてnpmも必要。)を管理する(Manager)ツールです。Node.jsのパッケージ(Package)とは、予め用意された便利な機能をまとめたものです。TechAcademyマガジンNode.jsが入っていれば同梱されている。下記のコマンドでバージョン番号が表示されるはず。CLIをインストールしてみる。Nuxt.js超入門」の手順でやってみる。※参考:https://www.amazon.co.jp/dp/B07X6F1C2P/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1下記のインストールのコマンドを打つ。@vue/cliインストール処理が始まるのでしばらく待つ。エラーコードを訳すと「書き込みアクセスがありません」といったことが書いてあり、こちらの記事の事象に近そう。prefixと打つと「/usr/local」と表示された。@vue/cli今度は成功したようだ!最後に3.11.0というバージョン表記が。cli-service-global」もインストール。CLIを利用する上で必要らしい。アドオンを追加@vue/cli-service-globalを追加することによって一つの*.vueファイルを用いてテストすることができます。