あいつの日誌β

働きながら旅しています。

Vue.js を書くために最小構成でセットアップする方法

f:id:okamuuu:20190429135426j:plain

あらすじ

vue cli を使う方法とスクラッチで書く方法を紹介します。基本的には vue cli を使う方が便利なのですが、初学者の方で vue の文法についてだれかに質問したい場合は後者の方法を一応覚えておくと良いと思います。

vue cli を使う方法

vue-cli を install します。以下の例ではプロジェクト単位で vue-cli を追加しています。

mkdir practice-vue-minimum && cd $_
touch  App.vue
yarn init -y
yarn add -D @vue/cli

この記事を書いている時点の vue-cli の version は 3.7.0 です。ちなみに vue.js の version は 2.6.10 です。

node_modules/.bin/vue --version
3.7.0

App.vue を以下のように編集します。

<template>
  <h1>Hello!</h1>
</template>

以下のコマンドで上記で作成した component をエントリーポイントにして起動する事ができます。

yarn vue serve App.vue

以下のようにメッセージが表示されれば OK

DONE  Compiled successfully in

 App running at:
 - Local:   http://localhost:8080/
 - Network: http://172.16.2.86:8080/

 Note that the development build is not optimized.
 To create a production build, run yarn build.

npm を日常的に使っている方であればこの方法が一番簡単だと思います。vue-cliwebpack の設定などを代行してくれますので Vue.js の学習に集中する事ができます。

vue cli を使わない方法

誰かに質問をする時に、例えば codepen.io や jsfiddle.net で公開してから質問をしたい時があると思います。jsfiddle だと以下のような URL で雛形を利用する事ができます。

https://jsfiddle.net/boilerplate/vue

この形式で vue を始めたい人は以下のような手順を踏むと良いでしょう。

mkdir practice-vue-scratch && cd $_
touch touch index.html style.css
yarn init -y
yarn add -D http-server

index.html と sytle.css を以下のように修正します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Vue.js App</title>
  <link href="/style.css" rel="stylesheet">
</head>
<body>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
    toggle: function(todo){
      todo.done = !todo.done
    }
  }
})
</script>
</body>
</html>

style.css

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

以下のコマンドで localhost で動作確認ができます。

yarn http-server .

まとめ

Vue.js の書き方について学習する際に学習する環境を簡単にセットアップする方法を紹介しました。もっと良い方法がある気もしますが、やりかたは一つだけではないのでこちらの記事が参考になる場面があれば思い出して頂ければ幸いです。