まずはVue.jsを動かしてみる

2020年9月22日

Contents

1. Vue.jsって動かすのに何がいるの
2. ハローワールドを書いてみた！！

Vue.jsって動かすのに何がいるの

Vue.jsをまずは動かしてみたい！という私をはじめとした初心者には、サーバなどの実行環境や統合開発環境は必要ないです。

必要なものは、IE9以降のブラウザが条件ですが、最近のGoogleChrome、Firefoxなどのブラウザを使っていればそれだけで動作させることができます。最近のパソコンであればそれでOK。

Vue.jsのライブラリ自体も使用する方法は、以下の方法があります。

インターネット上のリンクを指定して使う
Vue.jsは公式にてCDN（コンテンツデリバリーネットワーク）を利用してインターネットに公開されています。
Vue.jsを使うHTML上にそのリンクを指定することで、すぐに使用することができます。
パソコンにダウンロードして使う
Vue.jsはライブラリとしてダウンロード提供されています。自分のPCに公式サイトからVue.jsのライブラリファイルをダウンロードして、HTMLフォルダと同じフォルダに配置すれば使えます。（別フォルダでもリンクすれば使えます。）
NPMを利用する
NPMとは、NodePackageManagerの略で、JavaScriptの別フレームワークであるnode.jsが提供するパッケージ管理ツールを利用することで使用できます。（これはまた調べてみますが、学習初期ではきっといらない）

最初のうちに必要なものは、ブラウザとメモ帳があればそれでOK。

ハローワールドを書いてみた！！

それでははじめの一歩のハローワールドは以下のような感じ。

<!DOCTYPE html>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    
    <div id="apps">
        <p>{{message}}</p>
    </div>

    <script>
        new Vue({
            el: "#apps",
            data: {
                message: 'HelloWorld'
            }
        })
    </script>
</body>
</html>

上のコードをメモ帳に保存して、ブラウザで開くと結果はこんな感じ↓↓