作りながら学ぶVue.js入門（Vol.98掲載）

著者：大津真

JavaScriptフレームワークの中でも、学びやすさと柔軟さで人気を集めている「Vue.js」。本連載では、Vue.jsの基礎から実践的な使い方までを、分かりやすく丁寧に解説していきます。一緒にフロントエンド開発の楽しさを体験してみましょう。第3回では、HTMLやCSS、JavaScriptのコードをまとめた「SFCファイル」を使用したVueアプリケーションの作成について説明します。

シェルスクリプトマガジン Vol.98は以下のリンク先でご購入できます。

図6　「index.html」ファイルのbody要素

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

図7　「src/main.js」ファイルの内容

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

図8　デフォルトの「src/App.vue」ファイルの内容（抜粋）

<script setup> 
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
（略）
</style>

図9　CDN版のVueアプリケーション「counter1.html」のコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Vueサンプル</title>
  <style>
    h1 {
      font-size: 3em;
      background-color: #f0f0f0;
      color: green;
    }
  </style></head>
<body>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
  </script>
  <script type="module">
    import { createApp, ref } from 'vue'
    createApp({
      setup() {
        const counter = ref(0)
        function increment() { counter.value++ }
        return { counter, increment }
      }
    }).mount('#app')
  </script>
  <div id="app">
    <h1>カウント: {{ counter }}</h1>
    <button v-on:click="increment">+</button>
  </div>
</body>
</html>

図11　図9のVueアプリケーションの処理をApp.vueファイルに記述した例

<script setup>
  import { ref } from 'vue'
  const counter = ref(0)
  function increment() { counter.value++ }
</script>
<template>  
  <h1>カウント: {{ counter }}</h1>
  <button v-on:click="increment">+</button>
</template>
<style scoped>
  h1 {
    font-size: 3em;
    background-color: #f0f0f0;
    color: green;
  }
</style>

図A　「vite.config.js」ファイルの変更例

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/myapp/'
})