Zenn
🟡

【Vue.js】環境構築とディレクトリ構造

に公開
JavaScript
Vue.js
Vue.js
UI
component
tech

Vue

Javascriptのみ VS Vueを用いる
Javascriptのみ
html
<input id="check1" type="checkbox">
<input id="check2" type="checkbox">
<input id="check3" type="checkbox">
Javascript　1つの要素に対して1つの処理を記述していく必要がある
document.getElementById("check1").addEventListener("change", () => {
  console.log("check1 changed");
});
document.getElementById("check2").addEventListener("change", () => {
  console.log("check2 changed");
});
document.getElementById("check3").addEventListener("change", () => {
  console.log("check3 changed");
});
Vueを用いる
vue 
<div id="app">
  <div v-for="(item, index) in 3" :key="index">
    <input type="checkbox" @change="handleChange(index)">
  </div>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
const { createApp } = Vue;

createApp({
  methods: {
    handleChange(index) {
      console.log(`check${index + 1} changed`);
    }
  }
}).mount("#app");
</script>

Vueアプリの導入

パターン１：　【ローカルで動かす場合の環境構築の方法】

１．Node.jsをインストールする

https://nodejs.org/ja

２．環境変数の設定


Windows環境変数の設定画面（Windows マークから環境変数と検索し、Pathを選択し編集をクリック

３．エディタのターミナルからVueアプリケーションフォルダを作成

任意のディレクトリで実行し、フォルダが作成
npm create vue@latest
セキュリティエラーが出る場合は
セキュリティーエラーになる場合に実行するコマンド
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

４．プロジェクトフォルダ名の決定や必要な設定を行う

５．プロジェクトフォルダに入り以下のコマンドを実行する

以下の2つのコマンドを実行
// package.jsonファイルに記載された依存パッケージを、node_modulesディレクトリにインストールする。
npm install
// 開発用のローカルサーバーを立ち上げて、ブラウザで変更を確認できるようにする
npm run dev

６．http://localhost:5173にアクセスする

Vueアプリのディレクトリ構成と役割

上記の基本ディレクトリは、アプリケーションをインストール直後のディレクトリ構成である。今後の開発規模にもよるが、より管理を行いやすいディレクトリ構成にするためには以下のライブラリをインストールしてディレクトリ構成を拡張するとよい。

拡張ディレクトリにするために実行するべきコマンド一覧
インストールライブラリ一覧
$ npm install pinia　# 状態管理ライブラリ
$ npm install axios  # API通信ライブラリ
$ npm install vue-router # Vueコンポーネント間のルーティングを簡単に設定できる
・・・
フォルダ作成コマンド
# 一度に複数のディレクトリを作成
// LinuxやMacOS用
mkdir -p src/{views,router,store,services,utils}

// WindowsOS用
# src 配下に一括でディレクトリを作成
mkdir src\views, src\router, src\store, src\services, src\utils
ファイル作成コマンド
# 一度に複数のファイルを作成
// LinuxやMacOS用
touch src/{components/Home.vue,components/About.vue,views/HomeView.vue,views/AboutView.vue,router/index.js,store/index.js,services/api.js,utils/dateUtils.js}

// WindowsOS用
# 複数のファイルを一度に作成
$files = @(
    "src\components\Home.vue",
    "src\components\About.vue",
    "src\views\HomeView.vue",
    "src\views\AboutView.vue",
    "src\router\index.js",
    "src\store\index.js",
    "src\services\api.js",
    "src\utils\dateUtils.js",
)

foreach ($file in $files) {
    New-Item -Path $file -ItemType "file" -Force
}
その他インストールライブラリ一覧
Vite（ビルドツール）
npm install vite
ESLint + Prettier (コード品質とフォーマット)
npm install eslint eslint-plugin-vue --save-dev
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
VeeValidate (フォームバリデーション)
npm install vee-validate
Vue Use (共通機能ライブラリ)
npm install @vueuse/core
Vue I18n (国際化)
npm install vue-i18n
TailwindCSS（CSSフレームワーク）
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
現在インストールされているライブラリの一覧を確認する方法
npm list コマンド
npm list --depth=0
出力結果
$ npm list --depth=0
vue-project@0.0.0 C:\Users\shimo\Desktop\vue-project
├── @vitejs/plugin-vue@5.2.3
├── axios@1.9.0
├── pinia@3.0.2
├── vite-plugin-vue-devtools@7.7.5
├── vite@6.3.3
├── vue-router@4.5.1
├── vue@3.5.13
└── vue3-calendar@0.1.2
Vscode上での表示


Vscode上での表示

ライブラリの設定

vue-routerの設定

src/router/index.js（src/router/index.js内に設定を記述する）
// Vue Routerのインポート
//createRouter はルーターインスタンスを作成するための関数。
//createWebHistory は、ブラウザのヒストリーAPIを利用して、URLの履歴を管理するための関数です。これにより、ページ遷移時にURLが変更されます。
import { createRouter, createWebHistory } from 'vue-router';


// ルートコンポーネントのインポート
// これらのコンポーネントは、src/viewsディレクトリ内にあると仮定しています。
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';

// ルート定義
// path: URLパスです。このパスにアクセスすると、対応するコンポーネントが表示されます。
// name: ルートに名前を付けることができます。これを使うことで、プログラム的にルートを参照できます。
// component: 対象となる Vue コンポーネントです。HomeView や AboutView コンポーネントが表示されます。
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView,
  },
];

// ルーターインスタンスの作成（ルーターオブジェクトを作成する）
// createRouter関数を使って、ルーターインスタンスを作成します。
// createWebHistory関数を使って、ブラウザのヒストリーAPIを利用した履歴管理を行います。
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

// ルーターインスタンスをエクスポート
// これにより、Vueアプリケーション全体でルーティング機能を利用できるようになります。
// 例えば、main.jsでVueアプリケーションにルーターを追加する際に使用します。
export default router;
src/main.js（main.jsに作成したrouterをVueアプリケーションに適用する）
import { createApp } from 'vue'
import App from './App.vue'

// router ディレクトリ内に作成したルーティング設定をインポート

import router from './router'

// 作成したルーティングをアプリケーションに適用する記述
createApp(App)
  .use(router)  // アプリに「ルーター機能」を追加（App.vue内で<router-view />が使用できるようになる）
  .mount('#app')  // App.vue の中身を public/index.html の <div id="app"> に流し込む
index.html
// Viteは、ビルド時に、index.html をベースにしてsrc/main.js を読み込ませて最終的なブラウザに表示する形を作る。
// そのため、「Vueがマウントする場所」を1つは用意しなきゃいけない。
// public/index.htmlはVueアプリを「はめ込むための台座」
// <div id="app"></div>	Vueアプリ本体を置く場所

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vueアプリ</title>
</head>
<body>
  <!-- Vueアプリをマウントする場所（（App.vueの内容がここに流し込まれる） -->
  <div id="app"></div>

  <!-- Viteがビルド時にここにJSやCSSを自動で挿入する -->
  <script type="module" src="/src/main.js"></script>
</body>
</html>

Discussion