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

[YumaInaura]

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> 

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

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

https://jsfiddle.net/chrisvfritz/50wL7mdz/

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

参考

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

https://jp.vuejs.org/v2/guide/index.html

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