Vue.jsの始め方

こちらはアンテクアドベントカレンダー2021の記事ですhttps://adventar.org/calendars/6534

皆さんこんにちは、サーバーサイドエンジニアの大川です。一応本職はサーバーサイドエンジニアですが、最近フロントエンドのVue.jsを習得したいと思い勉強中です！
最近習得したことをまとめていきたいと思います！

筆者の環境

  • OS: Mac OS 11.6
  • エディタ: Visual Studio Code

方法

1. htmlファイルの用意

  • Macのローカルの任意のディレクトリにindex.htmlファイルを作成します。
  • index.htmlに下記の内容を記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
</html>
  • 下記サイトにアクセスします。
  • 下記の「開発バージョン、便利なコンソールの警告が含まれています」と記載されているscript要素の内容をコピーします。
  • 先程作成したindex.htmlのtitle要素の前くらいにVueの公式ドキュメントページでコピーしたscript要素を入力します。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
</html>
  • 準備はこれで完了です！次に今までの作業が問題無く完了できているかを確認します。

確認

  • 下記の内容をbody要素の最後の直前に下記の内容を記載します。
<script>
    let app = new Vue({
        el: '#app',
        data(){
            return {
                message: 'Hello Japan'
            }
        },
    })
</script>
  • main要素の中を下記の様に記載します。
<main>
    <div id="app">
       {{ message }}
    </div>
</main>
  • 修正後のindex.htmlファイルの全内容を下記に記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <header></header>
    <main>
        <div id="app">
            {{ message }}
        </div>
    </main>
    <footer></footer>
    <script>
        let app = new Vue({
            el: '#app',
            data(){
                return {
                    message: 'Hello Japan'
                }
            },
        })
    </script>
</body>
</html>
  • 先程から記載しているローカルのindex.htmlをブラウザで開きます。
  • 下記のように表示されればVue.jsを記載する準備が整いました！

最後に

以上でVue.jsを記載する準備は完了です！次回は今回表示テストのために記載したVue.jsのソースの説明と実際のソースの記載を記事にする予定です！

TAGS使用タグ一覧