Vue.jsを使う - k01ken’s b10g

開発環境は、Windows 7 Professional(32bit)。

1.node.jsをインストールしている前提で、vue-cliをインストールする

npm install -g vue-cli

2.カレントディレクトリをC:\に移動して、以下のようなコマンドを入力する。

vue init テンプレート名 プロジェクト名

を入力する。プロジェクト名で指定したディレクトリが作成されて、テンプレート名で指定したものでディレクトリ内にプロジェクトが作成されます。

具体的なコマンドはこちら。

vue init webpack-simple vue-test

Project name
Project description
Author
Licence
Use sass?
と続けて質問されるので、Use sass?以外はEnterキーを押して、Use sass?はyかnで判断する。

3.続けて以下のコマンドを入力する。

cd vue-test
npm install
npm run dev

localhost:8080へ自動的にアクセスすると思います。しなければ、URLを打ち込んでアクセスしてください。そうすると、以下のページが表示されます。

f:id:k01ken:20180820230811p:plain

vue-testディレクトリ内のsrcディレクトリ内にある、App.vueかmain.jsの中身を変更すると、ブラウザをリロードすることなく、自動的にページの内容が変更されます。

試しに変更してみます。src/App.vueを開いて、Welcome to Your Vue.js Appの部分をHello, Vueに変更してみます。ファイルを保存した段階で、すぐに、ページの内容が変更されることを確認してみてください。
f:id:k01ken:20190102125345p:plain

vue-cliを使わないで初めてみる

はじめに — Vue.js
Vue.jsの公式ページのチュートリアルを見てみると、vue-cliを初心者がいきなり使用することはすすめていないみたいです。
そこで、vueのjavascriptファイルをネット経由で読み込んで使用してみたいと思います。
それが以下のコード。実行すると、{{ message }}の部分が、Hello Vue!に置換されています。

<html lang="ja">
<head>
 <meta charset="utf-8">
<style>

</style>
<script>

</script>
</head>

<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			message: 'Hello Vue!'
		}
	})
</script>
</body>
</html>

Webブラウザのコンソールから、app.message = "太郎"と入力すると、値が、Hello Vue!から太郎に変更します。

参考リンク
Vue.js
はじめに — Vue.js