Vueの勉強をしよう ～1:インストール編～
はじめに
Vueのインストールは、公式ページが一番詳しく書いてあります。
今回はその中で個人的に引っかかったところをメモします。
実行環境については、別記事にてまとめているのでそちらを参照ください。
基本的にはNodeのver16となります。
今回のオチ
Vue.jsを学ぶ場合、インストール方法CDNとして取り込む方法がベターだと思います。
<script src="https://unpkg.com/vue@next"></script>
新しいことを学ぶとき一番大事なのはモチベーションが大事だと思ってます。
モチベーション維持には動く環境が必須だと思うんですよね。
今回の選択肢で、一番手軽なのがCDNだと思うのでこちらがベターという結論にしました。
動かしてみてVue.jsって面白いってなってから、CLIをいじろうかなという感じですね。
Vueのインストール方法
公式サイトから引用すると、インストール方法は以下の4つ。
何が違うのかわからないので、それぞれのメリットをさらっと記載します。
- ページ上で CDN パッケージ として取り込む
- JavaScript ファイルをダウンロードして、 自分でホストする
- npm を使ってインストールする
- 公式の CLI を使ってプロジェクトの基礎を作る
「ページ上で CDN パッケージ として取り込む」場合
Vue.jsを入れたいHTMLにいかを書くだけ
<script src="https://unpkg.com/vue@next"></script>
メリット
- シンプルに簡単かつ、すぐ導入できる。
- 動作を確認する場合は、こちらを使うほうが良い。
デメリット
「JavaScript ファイルをダウンロードして、 自分でホストする」場合
これは、ファイルをDLして自分のサーバ（PC）に配置して読み込む方法。
ほとんどCDNと同じ。
<script src="./vue.global.js"></script>
メリット
- シンプルに簡単かつ、すぐ導入できる。
- 動作を確認する場合は、こちらを使うほうが良い。
- ファイルがダウンロード済みなので、CDN先のURLが関係ない。
デメリット
- Vue.jsのウリである「SFCs（単一ファイルコンポーネント）」が使えない。 （最初は意識しなくてもいいかも）
「npm を使ってインストールする」場合
マニュアルによるとこちらがおすすめらしいが、最初のVue.jsのきっかけとしては微妙と思われる。
npm install vue@next npm install -D @vue/compiler-sfc
メリット
- Node環境があれば簡単に導入できる。
- すべての機能が利用できる
- カスタマイズもできる
デメリット
- webpack 等のVue.js以外の知識が必要
webpack等の内容を理解する時間を考えると、Vue.jsを初めて勉強をするとしたら
導入方法として適当とは言えないと思う。
「公式の CLI を使ってプロジェクトの基礎を作る」場合
Vue.jsを使ったサンプル画面までを表示するところまでを自動でやってくれるツールです。
将来的にはこちらを使いたいですが、、あまりにもいろいろな要素が詰まっているので勉強の導入には向いていないと思ってます。
npm install -g @vue/cli
メリット
- Node環境があれば簡単に導入できる。
- Webサーバの準備からwebpackまで全部やってくれる
- カスタマイズもできる
デメリット
- CLIで実施してる内容がわからない。
