あらすじ
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-cli
が webpack
の設定などを代行してくれますので 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 の書き方について学習する際に学習する環境を簡単にセットアップする方法を紹介しました。もっと良い方法がある気もしますが、やりかたは一つだけではないのでこちらの記事が参考になる場面があれば思い出して頂ければ幸いです。