Vue.js

Vue.jsを勉強中です。

まず動かしてみる

Node.js を使用することもできますが、使用しなくても動かせるので、まずは使用せずにやってみます。

Vue3とVue2で書き方が少し違います。

Vue 3


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        const { createApp, ref } = Vue
        createApp({
            setup() {
                const message = ref("Hello world!")
                return { message }
            }
        }).mount("#app")
    </script>
</body>

</html>

Vue 2

				
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello World!!'
            }
        })
    </script>
</body>

</html>

実行イメージ

Node.js で環境構築

以下のコマンドラインでプロジェクトを作成します。
プロジェクト名はコマンド実行後に聞かれるので、そこで入力します。


npm create vue@latest

現バージョン(vue:3.5.13)での表示。バージョンごとに変わると思われます。


T  Vue.js - The Progressive JavaScript Framework
|
o  Project name (target directory):
|  testProject
|
o  Package name:
|  testproject
|
*  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
|  [•] TypeScript
|  [ ] JSX Support
|  [ ] Router (SPA development)
|  [ ] Pinia (state management)
|  [ ] Vitest (unit testing)
|  [ ] End-to-End Testing
|  [ ] ESLint (error prevention)
|  [ ] Prettier (code formatting)
—


cd <プロジェクト名>
npm install
npm run dev

Node.js でビルド(デプロイ用ファイル作成)


npm run build

上記コマンドを実行するとdistフォルダにデプロイ用ファイルができます。

そのまま出力するとルートにデプロイされる前提でファイルが作られるので
ルート以外にデプロイする場合、vite.config.jsに以下の設定を追加します

vite.config.js


import { fileURLToPath, URL } from 'node:url'

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  base: "./",
})

Node.js 環境のサンプル

htmlファイルとvueファイルが自動生成されるので、vueファイルを以下のように変更します。

src\App.vue


<script setup>
import { ref } from 'vue'

const message = ref("Hello World!!")
</script>

<template>
  <h1>{{ message }}</h1>
</template>

まず動かしてみると同じ動きをします。
setupを付けることで通常のJavaScript処理からVue用のJavaScript処理になります。

参考までに自動生成されるhtmlファイルは以下になります。

src\main.js


import './assets/main.css'

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

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

index.html


<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

ページのトップへ戻る