Vite : インストール2025/08/04

	フロントエンドビルドツール Vite のインストールです。
[1]	こちらを参考に Node.js 22 をインストールしておきます。
[2]	任意の一般ユーザーで vue.js テンプレートで Vite テストアプリケーションを作成します。

ubuntu@dlp:~$

npm create vite@latest testproject2 -- --template vue

Need to install the following packages:
create-vite@7.0.3
Ok to proceed? (y)


> npx
> create-vite testproject2 --template vue

|
|  Scaffolding project in /home/ubuntu/testproject2...
|
+  Done. Now run:

  cd testproject2
  npm install
  npm run dev

ubuntu@dlp:~$

cd testproject2

ubuntu@dlp:~/testproject2$

npm install


added 34 packages, and audited 35 packages in 15s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

ubuntu@dlp:~/testproject2$

npm run dev


> testproject2@0.0.0 dev
> vite


  VITE v7.0.6  ready in 283 ms

  →  Local:   http://localhost:5173/
  →  Network: use --host to expose
  →  press h + enter to show help

# 他ホストからアクセスしたい場合は [--host] オプションを付加

ubuntu@dlp:~/testproject2$

vi package.json

{
  "name": "testproject2",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    // 追記
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
  },

ubuntu@dlp:~/testproject2$

vi vite.config.js

export default defineConfig({
  // 追記
  server: {
    host: true,
  },
  plugins: [vue()],
})

ubuntu@dlp:~/testproject2$

npm run dev


> testproject2@0.0.0 dev
> vite --host


  VITE v7.0.6  ready in 259 ms

  →  Local:   http://localhost:5173/
  →  Network: http://10.0.0.30:5173/
  →  press h + enter to show help

任意のクライアントコンピューターで表示された URL に Web アクセスして、以下のようなページが表示されれば OK です。

[3]	作成したテストアプリケーションを変更して動作確認します。

ubuntu@dlp:~$

cd testproject2

ubuntu@dlp:~/testproject2$

vi src/components/HelloWorld.vue

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

defineProps({
  msg: String,
  // [MyHello] string を定義する
  MyHello: String
})

.....
.....

<template>
  // ロゴの下に文字を挿入する
  <h1 style="font-size: 36px; color: red;">{{ MyHello }}</h1>
  <h1>{{ msg }}</h1>

ubuntu@dlp:~/testproject2$

vi src/App.vue

<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 MyHello="Hello Vite World!" msg="Vite + Vue" />
</template>

ubuntu@dlp:~/testproject2$

npm run dev