まずは最小構成でvueを動かそう

2022年2月14日2022年2月16日 souki202

まずはほぼ最小構成でvueを動かしてみましょう!

1 準備
- 1.1 HTML
- 1.2 js
2 mount
3 まとめ

準備

Vueはjsファイルに書いていきます。もちろん、読み込んだり表示するためのhtmlも必要です。

HTML

読み込むためのコードと、vueで表示したい内容を表示するための部分を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">

    <!-- CDNやダウンロードでvueを利用する場合のみ必要 -->
    <script src="https://unpkg.com/vue@next"></script>
    
    <!-- webpackなどでビルドする場合 -->
    <script src="app.js"></script>
    
    <title>Document</title>
</head>
<body>
    <!-- vueで制御する領域 -->
    <div id="app">
        {{text}}
    </div>
</body>
</html>

vueを導入する

Vue.jsとは、UIを構築するためのフレームワークの1つです。表示する内容をかんたんに、動的に変更でき、データや機能の管理に優れています。こ…

を参考にwebpackでビルドする場合は、distディレクトリ内に配置してください。

次に、jsファイルを用意しましょう。

js

ファイル名はapp.jsとします。前回の記事を参考にwebpackでビルドする場合はsrc/app.jsに配置してください。

import * as Vue from "vue"; // npmから導入したときのみ必要

const app = Vue.createApp({
    data() {
        return {
            text: "Hello, Vue World!!"
        }
    }
});

document.addEventListener("DOMContentLoaded", () => {
    // vueで制御する対象となる場所を指定
    app.mount("#app");
});

ビルドする場合は、npm run watchして保存のたびにコンパイルできるようにしましょう。

さて、いよいよHTMLを開いて表示してみます。

See the Pen Untitled by Totori (@souki202) on CodePen.

となっていれば成功です!