クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > JS > 【Vue.js】Vue CLIをインストールしてみる（CDN、Nuxe.jsとの違い）

【Vue.js】Vue CLIをインストールしてみる（CDN、Nuxe.jsとの違い）

JS Vue.js VueCLI

Vue.jsの続きです。前回はNuxt.jsで何ができるか調べました。今回はNext.jsのインストール…の前にVue CLIが未体験だったのでこちらのインストールをやってみます。それではいきましょう！

【目次】

前回の記事

※参考：【Vue.js】Nuxt.jsで何ができるのか調べた（SSR、ルーティング、静的ファイル生成など） - クモのようにコツコツと

CDNとVue CLIとNuxt.jsの違い

これまで、Vue.jsを利用するときに、CDNのリンクをしていた。この方法だと開発環境の構築が不要でCodePenなどでもすぐに体験できる。

例えばこちら

See the Pen Vuetify 09 by イイダリョウ (@i_ryo) on CodePen.

右上のCodePenのアイコンをクリックするとCodePenの画面が開く。JSコード欄の左上の歯車アイコンを開くと下記のCDNリンクが設定されているのがわかる。

<!-- Vue.jsのCDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

この方法だと楽なのだが、もっと凝ったことをしたい場合はVue CLIやNuxt.jsのインストールをした方が良さそう。

Next.jsは前回も書いた通り、Vue.jsの拡張機能が全部入りでパッケージ化されている。

※参考：【Vue.js】Nuxt.jsで何ができるのか調べた（SSR、ルーティング、静的ファイル生成など） - クモのようにコツコツと

一方Vue CLIはVue.jsの拡張機能を必要最低限から任意で追加してインストールする。ざっくり違いを書くと…

  • CDN：Vue.jsの基本機能で今すぐ始める
  • Vue CLI：Vue.jsの基本機能から任意で拡張機能を追加できる
  • Nuxt.js：Vue.jsの拡張機能が全部入りでパッケージ化されている

やりたいことがフルパッケージである必要がない場合はVue CLIで済ませる選択肢もあるのかな、と思い、先に体験することにした。

Chromeに「Vue.js devtools」をインストールしてみる

Web制作時にいつもChromeのデベロッパーツールで設定を確認したりしている。

※参考：Chromeデベロッパーツール事始め！HTML、CSS、JSを直感的に修正しよう - クモのようにコツコツと

デベロッパーツール にはVue.jsの開発用の拡張機能「Vue.js devtools」があることを知ったのでインストールしてみた。

※参考：Vue.js Devtoolsの導入方法と機能まとめ。Vue.jsを用いた開発を効率化させよう！ - Qiita

インストールするとデベロッパーツール の右上に「Vue」というタブが追加されるようだ。（Vue.jsではないページで開くとタブは現れないようだ）

Vue CLIの拡張機能

Vue CLIはVue Command Line Interfaceの略。CLIとはいわゆる黒い画面（Macではターミナル）のこと。

※参考：https://academy.gmocloud.com/keywords/20170301/3997

Vue.jsをコマンドで動かせるようにするツール。機能は結構多彩なようだ。

  • Hot Module Replacement、コード分​​割、 Tree Shaking 、効率的な長期キャッシング、エラーオーバーレイなどの事前設定済みの webpack 機能
  • ES2017 トランスコンパイル（オブジェクトのレスト、スプレッドやダイナミックインポートのような一般的な提案を含む）及び * Babel 7 とプリセット env による使用に応じたポリフィル注入
  • PostCSS（デフォルトで autoprefixer が有効）と全ての主要な CSS プリプロセッサのサポート
  • ハッシュ付のアセットリンクとプリロード/プリフェッチのリソースヒントを含む HTML の自動生成
  • .env ファイルを介したモードとカスケード環境変数
  • モダンモード：ネイティブ ES2017+ バンドルとレガシーバンドルを並行で出荷（詳細は後述）
  • マルチページモード：複数の HTML/JS エントリポイントを持つアプリケーションの構築
  • ビルドターゲット： Vue 単一ファイルコンポーネントをライブラリまたはネイティブ web コンポーネントにビルド（詳細は後述）

さらにオプション機能も

  • TypeScript
  • PWA
  • Vue Router & Vuex
  • ESLint / TSLint / Prettier
  • Jest または Mocha による単体テスト
  • Cypress または Nightwatch による E2E テスト

※参考：Vue CLI 3.0 が来ました！ — Vue.js

フロントエンド界隈でよく見るキーワードがたくさんでワクワクしますねー。つーか、Nuxtとどう違うの？もうこれでいんじゃね？とも感じる。

SSRをするならNuxt、しないならVue CLI

Vue CLIとNuxt.jsの一番の違いはSSR（サーバサイドレンダリング）をするかどうか。

出力は SSR, SPA, Static Generated が選べるので、 SSR が要らない場合は node.js サーバを用意する必要はなく、 S3 や GitHub Pages に SPA or Static Generated でビルドしたファイルを設置すればよい。

SEO が必要な動的ページがたくさんできるようなサービスでは Server Side Rendering (SSR) が必要になるだろう。この場合は NUXT を選択しておいてほぼ間違いない。
Vue で SSR をやるのは 専用のドキュメントページ ができる程度には大変である。

Vue CLI 3 にも SSR の公式プラグインがあってもよさそうなものだが、 Issue - Implement SSR mode (server side rendering) は「 NUXT があるから優先度が低い」という理由でクローズされている。

※参考：NUXT いるのかどうか (Vue CLI 3 との比較) - Qiita

ふむふむ。SSRを実現するためには本番サーバ側にもNode.js環境が必要ではあるが、それを使わないでVue.js環境からビルドした静的なファイルを上げるだけで済むこともありそうなので、やはりVue CLIも知っておこう。

Node.jsとnpm環境

Vue CLIを使うにあたりNode.js環境が必要。まずNode.jsが入っているか確認。ターミナルに下記のコマンドを打ってバージョン番号が表示されていれば入っている。

$ node -v

入っていない場合はインストールをする。（バージョンが古い場合はアンインストールしてから再インストールする）

※参考：https://qiita.com/yacchi1123/items/a85598bf7a35cb1307dc

そしてnpmも必要。

npmの正式名称は、Node Package Managerです。
npmの正式名称からも解るように、Node.jsのパッケージ（Package ）を管理する（Manager）ツールです。
Node.jsのパッケージ（Package）とは、予め用意された便利な機能をまとめたものです。

※参考：便利なパッケージ管理ツール！npmとは【初心者向け】 | TechAcademyマガジン

Node.jsが入っていれば同梱されている。下記のコマンドでバージョン番号が表示されるはず。

$ npm -v

Vue CLIをインストール

それではいよいよVue CLIをインストールしてみる。手元の書籍「Vue.js & Nuxt.js超入門」の手順でやってみる。

※参考：https://www.amazon.co.jp/dp/B07X6F1C2P/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

下記のインストールのコマンドを打つ。npmのコマンドだ。

$ npm install -g @vue/cli

インストール処理が始まるのでしばらく待つ。。

お、エラーになった。エラーコードを訳すと「書き込みアクセスがありません」といったことが書いてあり、こちらの記事の事象に近そう。

※参考：npmでpermission deniedになった時の対処法[mac] - Qiita

こちらの「対策１」で解決できたっぽい

対策1:npmのデフォルトディレクトリの権限を変更する

$ npm config get prefix

と打つと「/usr/local」と表示された。

$ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

でnpmディレクトリの権限を自分に変更

再度トライ！

$ npm install -g @vue/cli

今度は成功したようだ！最後に3.11.0というバージョン表記が。

+ @vue/cli@3.11.0

Vue cli-service-globalをインストール

続いて「Vue cli-service-global」もインストール。これもVue CLIを利用する上で必要らしい。

アドオンを追加
@vue/cli-service-globalを追加することによって一つの*.vueファイルを用いてテストすることができます。

※参考：https://qiita.com/shun_shobon/items/2028165d39aa4673e3ea

ふむふむ。では入れよう。下記のコマンドにて。

$ npm install -g @vue/cli-service-global

処理中。。しばらく待つ。

お、入ったようだ！

+ @vue/cli-service-global@3.11.0

最後に

ということでとりあえずVue CLIが何かを調べて、インストールまでやってみました！次回はVue CLIを使ったVueプロジェクトにトライしたいと思います。それではまた！

※参考：Vue.jsの習得のためにやったことまとめ
qiita.com