Vue.js開発入門 > Chapter 1 Vue.jsって何?
03 インストールしてみよう †
Vue.jsの利用方法は、3つあります。
- CDNで使う方法
- Vue.jsをダウンロードして使う方法
- Vue-cliで使う方法
Vue.jsのインストールガイド †
- インストール — Vue.js https://jp.vuejs.org/v2/guide/installation.html
CDNで使う方法 †
CDNとは? †
- コンテンツデリバリネットワーク - Wikipedia
コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。
CDNでVue.jsのファイルが配布されており、それをリンクすれば自分のWebサーバーにVue.jsをコピーしていなくても使えるようになります。
最新のVue.jsをリンクする場合 †
プロトタイピングや学習を目的とする場合は、以下のようにして最新バージョンを使うことができます:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
本番環境では、新しいバージョンによる意図しない不具合を避けるため、特定のバージョン番号とビルド番号にリンクすることをお勧めします:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
Vue.jsをダウンロードして使う方法 †
Vue.jsの公式サイトからVue.jsをダウンロードして、自分のWebサーバーにコピーして使います。
<script> 直接組み込み †
ダウンロードし script タグで読み込んでください。
開発中は本番バージョンを使用しないでください。 警告や一般的な間違いを見逃す可能性があります!
- 開発バージョン
警告出力とデバッグモードあり
https://jp.vuejs.org/js/vue.js - 本番バージョン
警告出力なし、 33.30 KB min+gzip
https://jp.vuejs.org/js/vue.min.js
Vue-cliで使う方法 †
Vue CLIとは? †
(参考)
- FN1807001 | Vue CLI 3入門 01: Vue CLIとは | HTML5 : テクニカルノート http://www.fumiononaka.com/Business/html5/FN1807001.html
Vue CLIは、Vue.jsでアプリケーションをつくるための、コマンドラインインタフェース(CLI)にもとづく開発ツールです。
コマンドラインインターフェース(Windowsのコマンドプロンプト。黒い画面)で、コマンドを操作すると、Vue.jsで作るアプリの雛形が作れます。
Node.jsやnpmと一緒に、ローカル環境でVue.jsを使ったWebアプリを開発する場合にVue-cliを使います。
React.jsなどと同じような開発をVue.jsでもできる、ということですね。
Vue-cliの使い方の詳細は、キーワード「Vue-cli」でGoogle検索すると、いろいろ参考情報がヒットします。
- Vue CLI https://cli.vuejs.org/
- vue-cliで始めるVue.jsチュートリアル (1) - Qiita https://qiita.com/sin_tanaka/items/29769266b3b078ea0f7c
(21分)