create-vueの更新反映(vitestの設定ファイル追加、VueDevTool案内) (#1090)

* dresscaについて対応

* AzureADB2Cについて対応

* ドキュメントを更新

* ブランクプロジェクトの作成コマンドを最新化

documents/contents/guidebooks/how-to-develop/vue-js/create-vuejs-blank-project.md

@@ -10,7 +10,7 @@ description: Vue.js を用いたクライアントサイドアプリケーショ
 以下のコマンドを実行して Vue.js をインストールします。
 
 ```terminal
-npm init vue@3
+npm create vue@latest
 ```
 
 create-vue パッケージをインストールする必要があり、続行するかどうかを確認するメッセージが表示されるので、「y」を選択します。
@@ -32,6 +32,7 @@ create-vue パッケージをインストールする必要があり、続行す
 √ Add an End-to-End Testing Solution? » Cypress
 √ Add ESLint for code quality? ... Yes
 √ Add Prettier for code formatting? ... Yes
+√ Add Vue DevTools 7 extension for debugging? (experimental) ... No
 ```
 
 ## ブランクプロジェクトのビルドと実行 {#build-and-serve-blank-project}

documents/contents/guidebooks/how-to-develop/vue-js/folder-structure-of-blank-project.md

@@ -30,7 +30,8 @@ description: Vue.js を用いたクライアントサイドアプリケーショ
 ├ tsconfig.node.json ------ TypeScript の設定ファイルとして読み込む対象を定義する設定ファイル
 ├ tsconfig.json ----------- TypeScript の設定ファイル
 ├ tsconfig.vitest.json ---- 単体テストの TypeScript として読み込む対象を定義する設定ファイル
-└ vite.config.ts ---------- 単体テストの設定ファイル
+├ vite.config.ts ---------- Vite の設定ファイル
+└ vitest.config.ts -------- 単体テストの設定ファイル
 ```
 
 各フォルダーの内部にどのようなサブフォルダーを作成するかは、[アーキテクチャ解説](./../../../app-architecture/client-side-rendering/frontend-architecture.md#project-structure) を参照してください。

samples/AzureADB2CAuth/auth-frontend/package.json

@@ -9,7 +9,7 @@
     "build-only:prod": "vite build --mode prod",
     "build-only:dev": "vite build --mode dev",
     "preview": "vite preview --port 5050",
-    "test:unit": "vitest --environment jsdom",
+    "test:unit": "vitest",
     "typecheck": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "lint:ci": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",

samples/AzureADB2CAuth/auth-frontend/vitest.config.ts

@@ -0,0 +1,16 @@
+import { fileURLToPath } from 'node:url';
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config';
+import viteConfig from './vite.config';
+
+export default defineConfig((configEnv) =>
+  mergeConfig(
+    viteConfig(configEnv),
+    defineConfig({
+      test: {
+        environment: 'jsdom',
+        exclude: [...configDefaults.exclude, 'e2e/*'],
+        root: fileURLToPath(new URL('./', import.meta.url)),
+      },
+    }),
+  ),
+);

samples/Dressca/dressca-frontend/package.json

@@ -9,7 +9,7 @@
     "build-only:prod": "vite build --mode prod",
     "build-only:dev": "vite build --mode dev",
     "preview": "vite preview --port 5173",
-    "test:unit": "vitest --environment jsdom",
+    "test:unit": "vitest",
     "test:e2e": "start-server-and-test dev http://localhost:5173/ 'cypress open --e2e --browser chrome'",
     "test:e2e:ci": "start-server-and-test dev http://localhost:5173/ 'cypress run'",
     "typecheck": "vue-tsc --build --force",

samples/Dressca/dressca-frontend/vitest.config.ts

@@ -0,0 +1,16 @@
+import { fileURLToPath } from 'node:url';
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config';
+import viteConfig from './vite.config';
+
+export default defineConfig((configEnv) =>
+  mergeConfig(
+    viteConfig(configEnv),
+    defineConfig({
+      test: {
+        environment: 'jsdom',
+        exclude: [...configDefaults.exclude, 'e2e/*'],
+        root: fileURLToPath(new URL('./', import.meta.url)),
+      },
+    }),
+  ),
+);