#Vue js を環境構築なし、サーバーなし、HTMLファイル1個だけで一瞬で始める、動かす。 (初心者向けチュートリアルを始めたい)

local に html ファイルを作る

自分のPCでファイルを作成、編集してアクセスする

~/start.html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app"></div>

<script>
new Vue({
  template: '<p></p>',
  data:{ msg:'hello world!' }
}).$mount('#app')

</script>

open ~/start.html

これだけで動くみたいだ。

npm とか 色々用意しないと動かせないのかと思いこんでいたが、なんと

チュートリアルの二個目

ちゃんと動いている。

テキストにマウスを乗せるとポップアップが出てくるぜ。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

<script>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})
</script> 

オンラインサイトを使う場合

公式でもおすすめされているサイト

にアクセスすると既にHTML / Javascriptが入力されており、 Run を実行するだけで動作させられるようだ！

参考

「Vue js はじめに」にこのことが書いてあるのだが、そもそも、膨大なドキュメントのどれが「はじめのはじめ」なのかが、初学者には分からないのですよ。

この「はじめに」にインストールボタンがあって、そこから npm の話とか出てくるじゃないですか…。

Original by Github issue

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter