Vue.jsとは
- オープンソースのJavaScriptフレームワークです。
- ライセンスはMIT Licenseです。
- プログレッシブフレームワークと公式サイトで称しています。
- プログレッシブとは、「進歩的」「進行形の」「進行性の」「漸進的な」「累進的な」「連続的な」などを意味する英語ですが、ここでは、「少しずつ適用していけるように」という意味を込めたフレームワークという意味で使用しているようです。
- 中核となるライブラリは、View層だけに焦点を当てている為、他のライブラリに比べて導入が簡単。
- 軽量のフレームワークの為、新規に導入するのも、既存プロジェクトに導入するのもSPA(シングルページアプリケーション)を構築するのも簡単
- 開発者はEvan You氏。「Angularの本当に好きだった部分を抽出して、余分な概念なしに本当に軽いものを作ることができたらどうだろうか？」と考えてVue.jsを開発したとのこと。
1. インストールするには
1.1. ダウンロードして使用
- GitHubからダウンロードします。
- 2020/4/2時点では、最新の安定バージョンは 2.6.11です。
- ダウンロード後、scriptタグで読み込みます。
1.2. CDNで使用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 上記の記載だと、最新バージョンが適用されますので、本番環境では注意が必要です。最新バージョン適用に伴い、予期せぬ挙動となる可能性が有るので、バージョン番号、ビルド番号を明記する事を推奨
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
- ネイティブのES Modulesを使用している場合、ES Modules互換ビルドを利用できます。ES Modulesについては、こちらのサイトを参考にさせて頂きました。
<script type="module">
import Vue from 'https://unpkg.com/vue@2.6.0/dist/vue.esm.browser.min.js';
new Vue({
...
});
</script>
- Vue は unpkg または cdnjs 上でも利用可能。
1.3. npmによるインストール
- 大規模アプリケーションを構築する際は、npmを利用したインストールが推奨されています。npmは、Node.jsのパッケージ管理ツールです。
$ npm install vue
- パッケージ管理ツールを使用する事で、Webpack、Browserify といったモジュールバンドラを組み合わせて使用するメリットも生まれます。WebpackとVue.jsを組み合わせたチュートリアルとして、こちらの記事を参考にさせて頂きました。
1.3.1. npmでインストールした場合のビルドファイルについて
- dist/ ディレクトリ下のビルドファイル (公式サイトより)
- 用語については、公式サイトを参照
| UMD | CommonJS | ES Module(バンドラ用) | ES Module (ブラウザ用) | |
|---|---|---|---|---|
| 完全 | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
| ランタイム限定 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - |
| 完全 (本番用) | vue.min.js | - | - | vue.esm.browser.min.js |
| ランタイム限定 (本番用) | vue.runtime.min.js | - | - | - |
1.4. CLIによる環境構築
- Vue.jsの開発環境をCLIを使用してスピーディーに構築する事が出来るようです。大規模アプリケーション環境の場合に重宝できそうです。
- 公式サイトでは、ビルドツールに関する事前知識を前提としています。
CLI は Node.js および関連するビルドツールに関する事前知識を前提としています。Vue またはフロントエンドビルドツールを初めて使用している場合、CLI を使用する前に、ビルドツールなしでガイドを参照することを強くお勧めします。
デバッグツール
- Vue Devtoolsが用意されています。使い方は、こちらの記事を参考にさせて頂きました。
Hello Worldの作成
2.1. 前提条件
- Vue.jsのscriptタグはCDNで読み込みしています。Vue.jsをダウンロードして読み込む場合は、1.1. ダウンロードして使用を参照してください。
2.2. 手順
- index.htmlを作成
-
headにscriptタグを定義する
- 開発バージョンの場合
<!-- 開発バージョン、便利なコンソールの警告が含まれています --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>- 本番バージョンの場合
<!-- 本番バージョン、サイズと速度のために最適化されています --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> -
bodyに”Hello World”の文言を出力するdivタグを定義する
<div id="app"> {{ message }} </div> -
index.htmlファイル中にJSを定義する
var app = new Vue({ el: '#app', data: { message: 'Hello World!' } })
2.3. 完成系のindex.html
<html lang='ja'>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>
</body>
</html>
2.4. 出力結果
参考サイト
公式サイト
vue.js developers New in Vue: ES Module Browser Build
Wikipedia-Vue.js
Webpackで始めるVue.js