今回はMacにVue.jsをインストールします。そしてインストールしたVue.jsを使い、ブラウザ上に「Hello Vue!」を表示します。

Vue.jsとは

Vue.jsとは、JavaScriptのフレームワークです。フレームワークとは、開発をする際に必要な機能などをまとめて提供してくれるソフトウェアのことです。JavaScriptのフレームワークは多くの種類がありますが、その中でもVue.jsは、構造がシンプルで学習コストが低いと言われています。詳細はVue.jsの公式サイトをご確認ください。

環境

macOS Mojave 10.14.4

Vue.jsのインストール

Vue.jsの作業用ディレクトリを作成して、そのディレクトリに移動します。

$ mkdir vuetest
$ cd vuetest

 
次にyarnを使ってVue.jsをインストールします。yarnとはJavaScriptのパッケージマネージャーです。パッケージマネージャーは、PHPでいうComposer、RubyでいうGem、Pythonでいうpipと同じようなイメージです。yarnのインストール方法はここでは割愛しますが、インストールしていなければyarnをインストールするを参考にしていただければと思います。

$ yarn add vue
yarn add v1.15.2
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue@2.6.10
info All dependencies
└─ vue@2.6.10
✨  Done in 0.59s.

 
lsコマンドで確認をすると、以下のパッケージがインストールされたことを確認出来ます。

$ ls
node_modules  package.json  yarn.lock

 
同じ階層にhtmlファイルを作成します。

$ vi index.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="/node_modules/vue/dist/vue.min.js"></script>
  <script src="/app.js"></script>

</body>
</html>

 
jsファイルを作成します。html内にある {{ message }} の内容をjsファイルで設定します。

$ vi app.js

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

 
WEBサーバーを起動するためにnpmで「http-server」をインストールします。

$ npm install -g http-server
/usr/local/bin/http-server -> /usr/local/lib/node_modules/http-server/bin/http-server
/usr/local/bin/hs -> /usr/local/lib/node_modules/http-server/bin/http-server
+ http-server@0.11.1
added 26 packages from 28 contributors in 4.221s

 
http-serverコマンドを実行します。

$ http-server
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.20.10.4:8080
Hit CTRL-C to stop the server

 
ブラウザで「http://127.0.0.1:8080」にアクセスします。WEBページ内に「Hello Vue!」が表示されます。
vuejs-install

以上です。

参考

公式サイト
はじめての Vue.js