Vue初心者の学習環境の構築方法

Vueを勉強したいが、環境構築からどうやるかさっぱり分からないVue初心者なので、まずはこの本を買って参考にやってみた。
これからはじめるVue.js 3実践入門 | 山田 祥寛 |本 | 通販 | Amazon

Vueを動かす環境について

Vueを動かす方法としては大きく分けて以下の2種類がある。

  • CDN(Content Delivery Network)経由で動かす方法
  • Node.jsやnpmをインストールして動かす方法

今回は勉強用として簡単に始めることができるCDN経由で動かす方でやってみようと思う。

CDNとは

CDNとは世界中に配置された代理サーバーのこと。
代理サーバー内にはすでにVueを動かすためのソフト類が入っており、ユーザーは近い場所にあるCDNを使いカンタンに(ソフト類のインストール不要)でVueを動かすことができる。


ただしCDNは代理サーバーなので、CDNの動作が停止している場合は動かすことができなかったり、自分のPC内で動かすのと比べてパフォーマンス面が少し劣ったりということがある。
本格的にVueでアプリを作っていくぞーってなったらNode.jsやnpmをインストールしてやった方がよさそう。

環境構築

CDN経由でやる場合環境構築手順は実際ほとんどない。
ファイルを作成して実行するだけですぐにVueを動かせる。
今回は初めてなのでブラウザで文字を表示するだけのVueプログラムを作ってみようと思う。

1.ファイル準備

とりあえず以下の2つのファイルを準備する。

  • hello.html
  • js/hello.js

2.hello.html作成

ファイルの中身に以下を記載する。
今回はただブラウザの画面に文字を表示するだけのプログラムを作る。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Vue.js</title>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="js/hello.js"></script>
</body>
</html>


{{ message }} と書いている箇所はマスタッシュ構文といい、Vueで定義した変数を表示させることができる便利な構文。
Vueの変数や処理は.jsファイルの方で定義する

3.hello.js作成

ファイルの中身に以下を記載する。

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

とりあえず今回は表示させるための変数(message)に「Hello Vue !」という文を入れるだけのシンプルなプログラム。

4.hello.htmlをブラウザで開く

hello.htmlをブラウザで開きこんな風に「Hello Vue !」の文字が表示されればVueは動いている。

今後はこの環境でVueの文法やコーディング方法を色々と学んでいこうと思う。