[Sy] はじめての Vue.js（ yarn でインストール＆動作確認）

2018/02/16

今回は Vue.js を使って「Hello Vue.js!」と表示するだけのサンプルを作ってみます。

1. Vue.js をインストールする

適当な作業ディレクトリを作って、

$ mkdir hello-vue
$ cd hello-vue

yarn を使って Vue.js をインストールします。

$ yarn add vue
・
・
success Saved 1 new dependency.
└─ vue@2.5.13
✨  Done in 0.57s.

2. HTML の準備

index.html という名前でファイルを用意します。

$ vim index.html

(index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめての Vue.js</title>
</head>
<body>

  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script src="/node_modules/vue/dist/vue.min.js"></script>
  <script src="/app.js"></script>

</body>
</html>

bodyタグの最後で Vue.js (vue.min.js) と、この後作る app.js を読み込みます。

{{ msg }} の部分に、Vue.js を使って値を埋め込んでいきます。

3. JavaScript を準備する

index.html で読み込んでいた app.js を作成します。

$ vim app.js

(app.js)

const app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue.js!'
  }
});

el のところで #app としてますが、これによって <div id="app"> の中で Vue.js の仕組みを使うことができるようになります。

そして、 data.msg の値（「Hello Vue.js!」という文字列）が {{ msg }} の部分に自動的に埋め込まれるという動きをします。

4. 動作確認

今回も http-server を起動して、動作確認をします。

⇒ [Sy] npm でインストールできる簡易的な Webサーバ「http-server」が手軽で便利

http-server を起動して、

$ http-server

http://localhost:8080 にアクセスし、このように表示されれば成功です。