create-vite-vue 1.5.5 → 1.5.7

package/README.md

@@ -19,6 +19,8 @@
 - 🌐 本地及网络访问启动日志显示
 - 📝 自定义 Banner 插件显示项目信息
 - 🎨 可选集成 Tailwind CSS（通过 postcss 配置）
+- 🟢 支持多种包管理器：npm / pnpm，可根据环境自动识别并使用
+- 🔔 可选集成 Mitt（轻量事件总线，实现组件间解耦通信）
 
 ---
 
@@ -33,6 +35,7 @@
 🖥️ Element Plus / 📱 Vant  
 🧰 VueUse · Lodash · Day.js  
 🎨 Tailwind CSS  
+🔔 Mitt  
 
 ---
 
@@ -58,126 +61,97 @@
 
 ## 📁 项目目录结构说明
 
-project-name
-├─ public/                   —— 公共静态资源目录  
-│  └─ favicon.ico  
-├─ src/  
-│  ├─ api/                   —— 接口请求封装目录  
-│  ├─ assets/                —— 图片、字体等静态资源  
-│  ├─ components/            —— 公共组件目录  
-│  ├─ router/                —— 路由配置（可选）  
-│  ├─ stores/                —— Pinia 状态管理（可选）  
-│  ├─ types/                 —— 类型声明文件  
-│  ├─ utils/                 —— 工具方法、请求封装  
-│  ├─ views/                 —— 页面级组件（路由页面）  
-│  │  └─ home/               —— 示例页面文件夹
-│  │     ├─ index.vue         —— 默认首页 /home
-│  │     ├─ meta.json         —— 页面 meta 信息
-│  │     └─ [id]/             —— 动态参数路由示例
-│  │         └─ [name].vue    —— 路由 /home/:id/:name
-│  ├─ App.vue                —— 根组件  
-│  ├─ main.js / main.ts      —— 项目启动入口  
-│  └─ style.css              —— 全局样式文件  
-├─ index.html                —— 项目入口页面  
-├─ jsconfig.json / tsconfig.json —— 路径别名与编译配置  
-├─ package.json              —— 项目依赖与脚本配置  
-├─ postcss.config.mjs        —— Tailwind CSS 配置文件（可选）  
-├─ README.md                 —— 项目说明文档  
-└─ vite.config.ts            —— Vite 开发与构建配置  
-
-### 目录说明（白话版）
-
-- **public**：放不会被打包处理的静态资源  
-- **assets**：项目中使用的图片、字体等资源  
-- **components**：可复用的通用组件  
-- **views**：页面级组件，通常与路由一一对应  
-- **router**：统一管理页面路由规则  
-- **stores**：全局状态管理目录  
-- **utils**：请求封装、工具方法等公共逻辑  
-- **api**：接口请求封装目录  
-- **types**：TypeScript 类型定义  
-- **postcss.config.mjs**：Tailwind CSS 配置，可根据需求修改  
-- **README.md**：项目说明文档
+> project-name  
+>
+> ├─ public/          —— 公共静态资源目录  
+>
+> │  └─ favicon.ico  
+>
+> ├─ src/  
+>
+> │  ├─ api/          —— 接口请求封装目录  
+>
+> │  ├─ assets/         —— 图片、字体等静态资源  
+>
+> │  ├─ components/       —— 公共组件目录  
+>
+> │  ├─ router/         —— 路由配置（可选）  
+>
+> │  ├─ stores/         —— Pinia 状态管理（可选）  
+>
+> │  ├─ types/         —— 类型声明文件  
+>
+> │  ├─ utils/         —— 工具方法、请求封装  
+>
+> │  ├─ views/         —— 页面级组件（路由页面）  
+>
+> │  │  └─ home/        —— 示例页面文件夹  
+>
+> │  │   ├─ index.vue     —— 默认首页 /home  
+>
+> │  │   ├─ meta.json     —— 页面 meta 信息  
+>
+> │  │   └─ [id]/       —— 动态参数路由示例  
+>
+> │  │     └─ [name].vue   —— 路由 /home/:id/:name  
+>
+> │  ├─ App.vue         —— 根组件  
+>
+> │  ├─ main.js / main.ts    —— 项目启动入口  
+>
+> │  └─ style.css        —— 全局样式文件  
+>
+> ├─ index.html         —— 项目入口页面  
+>
+> ├─ jsconfig.json / tsconfig.json —— 路径别名与编译配置  
+>
+> ├─ package.json        —— 项目依赖与脚本配置  
+>
+> ├─ postcss.config.mjs     —— Tailwind CSS 配置文件（可选）  
+>
+> ├─ README.md         —— 项目说明文档  
+>
+> └─ vite.config.ts       —— Vite 开发与构建配置  
 
 ---
 
-## ⚙️ 使用方式
+## ⚙️ 使用方式（多包管理器支持）
 
 1. 创建项目  
+
 ```bash
 npm create vite-vue@latest
+pnpm create vite-vue@latest
 ```
 
 2. 进入项目目录  
+
 ```bash
 cd 项目名
 ```
 
-3. 安装依赖  (已自动执行可省略)  
+3. 安装依赖  
+
 ```bash
 npm install
+pnpm install
 ```
 
 4. 启动开发环境  
+
 ```bash
 npm run dev
+pnpm dev
 ```
 
-> 如果在创建时选择了「立即运行」，工具会自动执行启动命令。
-
----
-
-## 🌐 技术栈官网链接
-
-- [Vite](https://vitejs.dev/)
-- [Vue 3](https://vuejs.org/)
-- [JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)
-- [TypeScript](https://www.typescriptlang.org/)
-- [Vue Router](https://router.vuejs.org/)
-- [Pinia](https://pinia.vuejs.org/)
-- [Axios](https://axios-http.com/)
-- [Element Plus](https://element-plus.org/)
-- [Vant](https://vant-contrib.gitee.io/vant/)
-- [VueUse](https://vueuse.org/)
-- [Lodash](https://lodash.com/)
-- [Day.js](https://day.js.org/)
-- [Tailwind CSS](https://tailwindcss.com/)
-
----
-
-## 🟢 Node.js 版本管理（.nvmrc）
-
-项目根目录中包含一个 **`.nvmrc`** 文件，用于指定当前项目推荐使用的**Node.js 版本**。这样可以保证不同开发者或不同机器运行项目时使用一致的 Node环境，避免依赖问题。
-
-### 使用 nvm 切换 Node 版本
-
-如果你安装了 **nvm（Node Version Manager）**，进入项目目录后执行：
-
-``` bash
-nvm use
-```
-
-nvm 会自动读取 `.nvmrc` 文件中的 Node 版本并切换。
-
-### Windows 可能出现的问题
-
-在 **Windows PowerShell** 中，`nvm use` 有时不会自动读取`.nvmrc`，可能会报错或无法切换版本。
-
-如果出现这种情况，可以执行：
-
-``` powershell
-nvm use $(Get-Content .nvmrc)
-```
-
-该命令会读取 `.nvmrc` 文件内容并手动切换 Node 版本。
-
 ---
 
 ## 🔧 常见需要调整的地方（具体文件示例）
 
 ### 1️⃣ 接口请求地址
 
-文件：`src/utils/request.ts`  `src/utils/request.js`  
+文件：`src/utils/request.ts` / `src/utils/request.js`  
+
 ```ts
 import axios from 'axios';
 
@@ -187,7 +161,7 @@ const service = axios.create({
 });
 
 // 示例请求
-export const getUserList = () => request.get('/users');
+export const getUserList = () => service.get('/users');
 
 export default service;
 ```
@@ -198,7 +172,8 @@ export default service;
 
 ### 2️⃣ 本地代理配置
 
-文件：`vite.config.ts`  `vite.config.js`  
+文件：`vite.config.ts` / `vite.config.js`  
+
 ```ts
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
@@ -224,7 +199,8 @@ export default defineConfig({
 
 ### 3️⃣ 路由结构（支持动态参数）
 
-文件：`src/router/index.ts`  `src/router/index.js`  
+文件：`src/router/index.ts` / `src/router/index.js`  
+
 ```ts
 import { createRouter, createWebHistory } from 'vue-router'
 import routes from '~pages'  // 自动生成的路由
@@ -237,14 +213,16 @@ const router = createRouter({
 export default router
 ```
 
-> 🔹 页面文件夹结构示例：
+> 页面文件夹结构示例：
+
 ```text
 src/views/home/
 ├─ index.vue          -> /home
 └─ [id]/[name].vue    -> /home/:id/:name
 ```
 
-> 🔹 获取路由参数：
+> 获取路由参数：
+
 ```ts
 import { useRoute } from 'vue-router'
 const route = useRoute()
@@ -257,6 +235,7 @@ console.log(route.params.name)
 ### 4️⃣ 页面内容与样式
 
 文件示例：`src/views/home/index.vue`  
+
 ```vue
 <template>
   <div class="home-container">
@@ -281,6 +260,64 @@ console.log(route.params.name)
 
 ---
 
+### 5️⃣ Mitt 事件总线使用示例
+
+#### 封装事件总线
+
+文件：`src/utils/eventBus.ts`
+
+```ts
+import mitt from 'mitt'
+
+type Events = {
+  userLogin: { name: string },
+  userLogout: null
+}
+
+const emitter = mitt<Events>()
+
+export default emitter
+```
+
+#### 使用示例
+
+##### 组件 A（发送事件）
+
+```ts
+<script setup lang="ts">
+import eventBus from '@/utils/eventBus'
+
+function login() {
+  eventBus.emit('userLogin', { name: '张三' })
+}
+</script>
+```
+
+##### 组件 B（接收事件）
+
+```ts
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import eventBus from '@/utils/eventBus'
+
+function handleLogin(payload: { name: string }) {
+  console.log('用户登录:', payload.name)
+}
+
+onMounted(() => {
+  eventBus.on('userLogin', handleLogin)
+})
+
+onUnmounted(() => {
+  eventBus.off('userLogin', handleLogin)
+})
+</script>
+```
+
+> 🔹 Mitt 事件总线轻量高效，适合组件间解耦通信，替代父子传递 props / emit 或 Vuex/Pinia 中的小型事件场景。
+
+---
+
 ## 🎯 适用场景
 
 - Vue 3 新手快速上手
@@ -291,6 +328,25 @@ console.log(route.params.name)
 
 ---
 
+## 🌐 技术栈官网链接
+
+- [Vite | 下一代的前端工具链](https://cn.vitejs.dev/)
+- [Vue.js - 渐进式 JavaScript 框架 | Vue.js](https://cn.vuejs.org/)
+- [JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)  
+- [TypeScript](https://www.typescriptlang.org/)  
+- [Vue Router | Vue.js 的官方路由](https://router.vuejs.org/zh/)
+- [Pinia | The intuitive store for Vue.js](https://pinia.vuejs.org/zh/)
+- [Axios](https://www.axios-http.cn/)
+- [Element Plus | 一个 Vue 3 UI 框架](https://element-plus.org/zh-CN/)
+- [Vant 4 - 轻量、可定制的移动端组件库](https://vant-ui.github.io/vant/#/zh-CN)
+- [VueUse](https://vueuse.pages.dev/)
+- [Lodash](https://www.lodashjs.com/)
+- [Day.js](https://day.js.org/)  
+- [Tailwind CSS](https://tailwindcss.com/)  
+- [Mitt](https://github.com/developit/mitt)  
+
+---
+
 ## 📄 License
 
 MIT License

package/bin/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 import { execSync } from 'child_process'
 import fs from 'fs'
 import path from 'path'
@@ -41,10 +41,6 @@ const pkgCommands = {
     install: 'npm install',
     dev: 'npm run dev'
   },
-  yarn: {
-    install: 'yarn',
-    dev: 'yarn dev'
-  },
   pnpm: {
     install: 'pnpm install',
     dev: 'pnpm dev'
@@ -104,7 +100,8 @@ const pkgCommands = {
         { title: 'VueUse（实用 Composition API）', value: 'vueuse' },
         { title: 'Lodash（工具库）', value: 'lodash' },
         { title: 'Day.js（日期处理）', value: 'dayjs' },
-        { title: 'Tailwind CSS（原子化 CSS）', value: 'tailwind' }
+        { title: 'Tailwind CSS（原子化 CSS）', value: 'tailwind' },
+        { title: 'mitt（事件总线）', value: 'mitt' }
       ]
     })
 
@@ -117,7 +114,7 @@ const pkgCommands = {
     }
 
     const extraPlugins = featureList?.filter(v =>
-      ['vueuse', 'lodash', 'dayjs', 'tailwind'].includes(v)
+      ['vueuse', 'lodash', 'dayjs', 'tailwind', 'mitt'].includes(v)
     ) || []
 
     // 询问是否开启自动路由
@@ -253,7 +250,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
       }
       if(features.axios) optionalDeps['axios'] = '^1.13.6'
       if(features.ui.includes('element')) {
-        optionalDeps['element-plus'] = '^2.13.3'
+        optionalDeps['element-plus'] = '^2.13.5'
         optionalDeps['@element-plus/icons-vue'] = '^2.3.2'
       }
       if(features.ui.includes('vant')) {
@@ -261,13 +258,14 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
       }
       // 增强插件依赖
       if(extraPlugins.includes('vueuse')) optionalDeps['@vueuse/core'] = '^14.2.1'
-      if(extraPlugins.includes('dayjs')) optionalDeps['dayjs'] = '^1.11.19'
+      if(extraPlugins.includes('dayjs')) optionalDeps['dayjs'] = '^1.11.20'
       if(extraPlugins.includes('lodash')) optionalDeps['lodash'] = '^4.17.23'
       if(extraPlugins.includes('tailwind')) {
-        optionalDeps['tailwindcss'] = '^4.2.1'
-        optionalDeps['@tailwindcss/postcss'] = '^4.2.1'
+        optionalDeps['tailwindcss'] = '^4.2.2'
+        optionalDeps['@tailwindcss/postcss'] = '^4.2.2'
         optionalDeps['postcss'] = '^8.5.8'
       }
+      if(extraPlugins.includes('mitt')) optionalDeps['mitt'] = '^3.0.1'
       if(autoRoute) optionalDeps['vite-plugin-pages'] = '^0.33.3'
 
       let depsStr = ''
@@ -391,8 +389,6 @@ export default createRouter({
 
     if(pkgManager === 'pnpm') {
       installCmd = 'pnpm install'
-    } else if(pkgManager === 'yarn') {
-      installCmd = 'yarn'
     } else {
       installCmd = 'npm install'
     }
@@ -417,11 +413,9 @@ function detectPackageManager () {
   const userAgent = process.env.npm_config_user_agent || ''
 
   if(userAgent.startsWith('pnpm')) return 'pnpm'
-  if(userAgent.startsWith('yarn')) return 'yarn'
   if(userAgent.startsWith('npm')) return 'npm'
 
   if(fs.existsSync('pnpm-lock.yaml')) return 'pnpm'
-  if(fs.existsSync('yarn.lock')) return 'yarn'
 
   return 'npm'
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vite-vue",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "description": "基于Vite+Vue3创建基础项目模板",
   "main": "index.js",
   "author": "YwaiX",

package/template/base-js/README.md

@@ -19,6 +19,8 @@
 - 🌐 本地及网络访问启动日志显示
 - 📝 自定义 Banner 插件显示项目信息
 - 🎨 可选集成 Tailwind CSS（通过 postcss 配置）
+- 🟢 支持多种包管理器：npm / pnpm，可根据环境自动识别并使用
+- 🔔 可选集成 Mitt（轻量事件总线，实现组件间解耦通信）
 
 ---
 
@@ -33,6 +35,7 @@
 🖥️ Element Plus / 📱 Vant  
 🧰 VueUse · Lodash · Day.js  
 🎨 Tailwind CSS  
+🔔 Mitt  
 
 ---
 
@@ -58,126 +61,97 @@
 
 ## 📁 项目目录结构说明
 
-project-name
-├─ public/                   —— 公共静态资源目录  
-│  └─ favicon.ico  
-├─ src/  
-│  ├─ api/                   —— 接口请求封装目录  
-│  ├─ assets/                —— 图片、字体等静态资源  
-│  ├─ components/            —— 公共组件目录  
-│  ├─ router/                —— 路由配置（可选）  
-│  ├─ stores/                —— Pinia 状态管理（可选）  
-│  ├─ types/                 —— 类型声明文件  
-│  ├─ utils/                 —— 工具方法、请求封装  
-│  ├─ views/                 —— 页面级组件（路由页面）  
-│  │  └─ home/               —— 示例页面文件夹
-│  │     ├─ index.vue         —— 默认首页 /home
-│  │     ├─ meta.json         —— 页面 meta 信息
-│  │     └─ [id]/             —— 动态参数路由示例
-│  │         └─ [name].vue    —— 路由 /home/:id/:name
-│  ├─ App.vue                —— 根组件  
-│  ├─ main.js / main.ts      —— 项目启动入口  
-│  └─ style.css              —— 全局样式文件  
-├─ index.html                —— 项目入口页面  
-├─ jsconfig.json / tsconfig.json —— 路径别名与编译配置  
-├─ package.json              —— 项目依赖与脚本配置  
-├─ postcss.config.mjs        —— Tailwind CSS 配置文件（可选）  
-├─ README.md                 —— 项目说明文档  
-└─ vite.config.ts            —— Vite 开发与构建配置  
-
-### 目录说明（白话版）
-
-- **public**：放不会被打包处理的静态资源  
-- **assets**：项目中使用的图片、字体等资源  
-- **components**：可复用的通用组件  
-- **views**：页面级组件，通常与路由一一对应  
-- **router**：统一管理页面路由规则  
-- **stores**：全局状态管理目录  
-- **utils**：请求封装、工具方法等公共逻辑  
-- **api**：接口请求封装目录  
-- **types**：TypeScript 类型定义  
-- **postcss.config.mjs**：Tailwind CSS 配置，可根据需求修改  
-- **README.md**：项目说明文档
+> project-name  
+>
+> ├─ public/          —— 公共静态资源目录  
+>
+> │  └─ favicon.ico  
+>
+> ├─ src/  
+>
+> │  ├─ api/          —— 接口请求封装目录  
+>
+> │  ├─ assets/         —— 图片、字体等静态资源  
+>
+> │  ├─ components/       —— 公共组件目录  
+>
+> │  ├─ router/         —— 路由配置（可选）  
+>
+> │  ├─ stores/         —— Pinia 状态管理（可选）  
+>
+> │  ├─ types/         —— 类型声明文件  
+>
+> │  ├─ utils/         —— 工具方法、请求封装  
+>
+> │  ├─ views/         —— 页面级组件（路由页面）  
+>
+> │  │  └─ home/        —— 示例页面文件夹  
+>
+> │  │   ├─ index.vue     —— 默认首页 /home  
+>
+> │  │   ├─ meta.json     —— 页面 meta 信息  
+>
+> │  │   └─ [id]/       —— 动态参数路由示例  
+>
+> │  │     └─ [name].vue   —— 路由 /home/:id/:name  
+>
+> │  ├─ App.vue         —— 根组件  
+>
+> │  ├─ main.js / main.ts    —— 项目启动入口  
+>
+> │  └─ style.css        —— 全局样式文件  
+>
+> ├─ index.html         —— 项目入口页面  
+>
+> ├─ jsconfig.json / tsconfig.json —— 路径别名与编译配置  
+>
+> ├─ package.json        —— 项目依赖与脚本配置  
+>
+> ├─ postcss.config.mjs     —— Tailwind CSS 配置文件（可选）  
+>
+> ├─ README.md         —— 项目说明文档  
+>
+> └─ vite.config.ts       —— Vite 开发与构建配置  
 
 ---
 
-## ⚙️ 使用方式
+## ⚙️ 使用方式（多包管理器支持）
 
 1. 创建项目  
+
 ```bash
 npm create vite-vue@latest
+pnpm create vite-vue@latest
 ```
 
 2. 进入项目目录  
+
 ```bash
 cd 项目名
 ```
 
-3. 安装依赖  (已自动执行可省略)  
+3. 安装依赖  
+
 ```bash
 npm install
+pnpm install
 ```
 
 4. 启动开发环境  
+
 ```bash
 npm run dev
+pnpm dev
 ```
 
-> 如果在创建时选择了「立即运行」，工具会自动执行启动命令。
-
----
-
-## 🌐 技术栈官网链接
-
-- [Vite](https://vitejs.dev/)
-- [Vue 3](https://vuejs.org/)
-- [JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)
-- [TypeScript](https://www.typescriptlang.org/)
-- [Vue Router](https://router.vuejs.org/)
-- [Pinia](https://pinia.vuejs.org/)
-- [Axios](https://axios-http.com/)
-- [Element Plus](https://element-plus.org/)
-- [Vant](https://vant-contrib.gitee.io/vant/)
-- [VueUse](https://vueuse.org/)
-- [Lodash](https://lodash.com/)
-- [Day.js](https://day.js.org/)
-- [Tailwind CSS](https://tailwindcss.com/)
-
----
-
-## 🟢 Node.js 版本管理（.nvmrc）
-
-项目根目录中包含一个 **`.nvmrc`** 文件，用于指定当前项目推荐使用的**Node.js 版本**。这样可以保证不同开发者或不同机器运行项目时使用一致的 Node环境，避免依赖问题。
-
-### 使用 nvm 切换 Node 版本
-
-如果你安装了 **nvm（Node Version Manager）**，进入项目目录后执行：
-
-``` bash
-nvm use
-```
-
-nvm 会自动读取 `.nvmrc` 文件中的 Node 版本并切换。
-
-### Windows 可能出现的问题
-
-在 **Windows PowerShell** 中，`nvm use` 有时不会自动读取`.nvmrc`，可能会报错或无法切换版本。
-
-如果出现这种情况，可以执行：
-
-``` powershell
-nvm use $(Get-Content .nvmrc)
-```
-
-该命令会读取 `.nvmrc` 文件内容并手动切换 Node 版本。
-
 ---
 
 ## 🔧 常见需要调整的地方（具体文件示例）
 
 ### 1️⃣ 接口请求地址
 
-文件：`src/utils/request.ts`  `src/utils/request.js`  
+文件：`src/utils/request.ts` / `src/utils/request.js`  
+
 ```ts
 import axios from 'axios';
 
@@ -187,7 +161,7 @@ const service = axios.create({
 });
 
 // 示例请求
-export const getUserList = () => request.get('/users');
+export const getUserList = () => service.get('/users');
 
 export default service;
 ```
@@ -198,7 +172,8 @@ export default service;
 
 ### 2️⃣ 本地代理配置
 
-文件：`vite.config.ts`  `vite.config.js`  
+文件：`vite.config.ts` / `vite.config.js`  
+
 ```ts
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
@@ -224,7 +199,8 @@ export default defineConfig({
 
 ### 3️⃣ 路由结构（支持动态参数）
 
-文件：`src/router/index.ts`  `src/router/index.js`  
+文件：`src/router/index.ts` / `src/router/index.js`  
+
 ```ts
 import { createRouter, createWebHistory } from 'vue-router'
 import routes from '~pages'  // 自动生成的路由
@@ -237,14 +213,16 @@ const router = createRouter({
 export default router
 ```
 
-> 🔹 页面文件夹结构示例：
+> 页面文件夹结构示例：
+
 ```text
 src/views/home/
 ├─ index.vue          -> /home
 └─ [id]/[name].vue    -> /home/:id/:name
 ```
 
-> 🔹 获取路由参数：
+> 获取路由参数：
+
 ```ts
 import { useRoute } from 'vue-router'
 const route = useRoute()
@@ -257,6 +235,7 @@ console.log(route.params.name)
 ### 4️⃣ 页面内容与样式
 
 文件示例：`src/views/home/index.vue`  
+
 ```vue
 <template>
   <div class="home-container">
@@ -281,6 +260,64 @@ console.log(route.params.name)
 
 ---
 
+### 5️⃣ Mitt 事件总线使用示例
+
+#### 封装事件总线
+
+文件：`src/utils/eventBus.ts`
+
+```ts
+import mitt from 'mitt'
+
+type Events = {
+  userLogin: { name: string },
+  userLogout: null
+}
+
+const emitter = mitt<Events>()
+
+export default emitter
+```
+
+#### 使用示例
+
+##### 组件 A（发送事件）
+
+```ts
+<script setup lang="ts">
+import eventBus from '@/utils/eventBus'
+
+function login() {
+  eventBus.emit('userLogin', { name: '张三' })
+}
+</script>
+```
+
+##### 组件 B（接收事件）
+
+```ts
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import eventBus from '@/utils/eventBus'
+
+function handleLogin(payload: { name: string }) {
+  console.log('用户登录:', payload.name)
+}
+
+onMounted(() => {
+  eventBus.on('userLogin', handleLogin)
+})
+
+onUnmounted(() => {
+  eventBus.off('userLogin', handleLogin)
+})
+</script>
+```
+
+> 🔹 Mitt 事件总线轻量高效，适合组件间解耦通信，替代父子传递 props / emit 或 Vuex/Pinia 中的小型事件场景。
+
+---
+
 ## 🎯 适用场景
 
 - Vue 3 新手快速上手
@@ -291,6 +328,25 @@ console.log(route.params.name)
 
 ---
 
+## 🌐 技术栈官网链接
+
+- [Vite | 下一代的前端工具链](https://cn.vitejs.dev/)
+- [Vue.js - 渐进式 JavaScript 框架 | Vue.js](https://cn.vuejs.org/)
+- [JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)  
+- [TypeScript](https://www.typescriptlang.org/)  
+- [Vue Router | Vue.js 的官方路由](https://router.vuejs.org/zh/)
+- [Pinia | The intuitive store for Vue.js](https://pinia.vuejs.org/zh/)
+- [Axios](https://www.axios-http.cn/)
+- [Element Plus | 一个 Vue 3 UI 框架](https://element-plus.org/zh-CN/)
+- [Vant 4 - 轻量、可定制的移动端组件库](https://vant-ui.github.io/vant/#/zh-CN)
+- [VueUse](https://vueuse.pages.dev/)
+- [Lodash](https://www.lodashjs.com/)
+- [Day.js](https://day.js.org/)  
+- [Tailwind CSS](https://tailwindcss.com/)  
+- [Mitt](https://github.com/developit/mitt)  
+
+---
+
 ## 📄 License
 
 MIT License

package/template/base-js/package.json.tpl

@@ -11,13 +11,10 @@
   "dependencies": {
     "less": "^4.5.1",
     "tslib": "^2.8.1",
-    "vue": "^3.5.25"__OPTIONAL_DEP__
+    "vue": "^3.5.30"__OPTIONAL_DEP__
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.2",
-    "vite": "^8.0.0-beta.13"
-  },
-  "overrides": {
-    "vite": "^8.0.0-beta.13"
+    "@vitejs/plugin-vue": "^6.0.5",
+    "vite": "^8.0.1"
   }
 }

package/template/base-ts/README.md

@@ -19,6 +19,8 @@
 - 🌐 本地及网络访问启动日志显示
 - 📝 自定义 Banner 插件显示项目信息
 - 🎨 可选集成 Tailwind CSS（通过 postcss 配置）
+- 🟢 支持多种包管理器：npm / pnpm，可根据环境自动识别并使用
+- 🔔 可选集成 Mitt（轻量事件总线，实现组件间解耦通信）
 
 ---
 
@@ -33,6 +35,7 @@
 🖥️ Element Plus / 📱 Vant  
 🧰 VueUse · Lodash · Day.js  
 🎨 Tailwind CSS  
+🔔 Mitt  
 
 ---
 
@@ -58,126 +61,97 @@
 
 ## 📁 项目目录结构说明
 
-project-name
-├─ public/                   —— 公共静态资源目录  
-│  └─ favicon.ico  
-├─ src/  
-│  ├─ api/                   —— 接口请求封装目录  
-│  ├─ assets/                —— 图片、字体等静态资源  
-│  ├─ components/            —— 公共组件目录  
-│  ├─ router/                —— 路由配置（可选）  
-│  ├─ stores/                —— Pinia 状态管理（可选）  
-│  ├─ types/                 —— 类型声明文件  
-│  ├─ utils/                 —— 工具方法、请求封装  
-│  ├─ views/                 —— 页面级组件（路由页面）  
-│  │  └─ home/               —— 示例页面文件夹
-│  │     ├─ index.vue         —— 默认首页 /home
-│  │     ├─ meta.json         —— 页面 meta 信息
-│  │     └─ [id]/             —— 动态参数路由示例
-│  │         └─ [name].vue    —— 路由 /home/:id/:name
-│  ├─ App.vue                —— 根组件  
-│  ├─ main.js / main.ts      —— 项目启动入口  
-│  └─ style.css              —— 全局样式文件  
-├─ index.html                —— 项目入口页面  
-├─ jsconfig.json / tsconfig.json —— 路径别名与编译配置  
-├─ package.json              —— 项目依赖与脚本配置  
-├─ postcss.config.mjs        —— Tailwind CSS 配置文件（可选）  
-├─ README.md                 —— 项目说明文档  
-└─ vite.config.ts            —— Vite 开发与构建配置  
-
-### 目录说明（白话版）
-
-- **public**：放不会被打包处理的静态资源  
-- **assets**：项目中使用的图片、字体等资源  
-- **components**：可复用的通用组件  
-- **views**：页面级组件，通常与路由一一对应  
-- **router**：统一管理页面路由规则  
-- **stores**：全局状态管理目录  
-- **utils**：请求封装、工具方法等公共逻辑  
-- **api**：接口请求封装目录  
-- **types**：TypeScript 类型定义  
-- **postcss.config.mjs**：Tailwind CSS 配置，可根据需求修改  
-- **README.md**：项目说明文档
+> project-name  
+>
+> ├─ public/          —— 公共静态资源目录  
+>
+> │  └─ favicon.ico  
+>
+> ├─ src/  
+>
+> │  ├─ api/          —— 接口请求封装目录  
+>
+> │  ├─ assets/         —— 图片、字体等静态资源  
+>
+> │  ├─ components/       —— 公共组件目录  
+>
+> │  ├─ router/         —— 路由配置（可选）  
+>
+> │  ├─ stores/         —— Pinia 状态管理（可选）  
+>
+> │  ├─ types/         —— 类型声明文件  
+>
+> │  ├─ utils/         —— 工具方法、请求封装  
+>
+> │  ├─ views/         —— 页面级组件（路由页面）  
+>
+> │  │  └─ home/        —— 示例页面文件夹  
+>
+> │  │   ├─ index.vue     —— 默认首页 /home  
+>
+> │  │   ├─ meta.json     —— 页面 meta 信息  
+>
+> │  │   └─ [id]/       —— 动态参数路由示例  
+>
+> │  │     └─ [name].vue   —— 路由 /home/:id/:name  
+>
+> │  ├─ App.vue         —— 根组件  
+>
+> │  ├─ main.js / main.ts    —— 项目启动入口  
+>
+> │  └─ style.css        —— 全局样式文件  
+>
+> ├─ index.html         —— 项目入口页面  
+>
+> ├─ jsconfig.json / tsconfig.json —— 路径别名与编译配置  
+>
+> ├─ package.json        —— 项目依赖与脚本配置  
+>
+> ├─ postcss.config.mjs     —— Tailwind CSS 配置文件（可选）  
+>
+> ├─ README.md         —— 项目说明文档  
+>
+> └─ vite.config.ts       —— Vite 开发与构建配置  
 
 ---
 
-## ⚙️ 使用方式
+## ⚙️ 使用方式（多包管理器支持）
 
 1. 创建项目  
+
 ```bash
 npm create vite-vue@latest
+pnpm create vite-vue@latest
 ```
 
 2. 进入项目目录  
+
 ```bash
 cd 项目名
 ```
 
-3. 安装依赖  (已自动执行可省略)  
+3. 安装依赖  
+
 ```bash
 npm install
+pnpm install
 ```
 
 4. 启动开发环境  
+
 ```bash
 npm run dev
+pnpm dev
 ```
 
-> 如果在创建时选择了「立即运行」，工具会自动执行启动命令。
-
----
-
-## 🌐 技术栈官网链接
-
-- [Vite](https://vitejs.dev/)
-- [Vue 3](https://vuejs.org/)
-- [JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)
-- [TypeScript](https://www.typescriptlang.org/)
-- [Vue Router](https://router.vuejs.org/)
-- [Pinia](https://pinia.vuejs.org/)
-- [Axios](https://axios-http.com/)
-- [Element Plus](https://element-plus.org/)
-- [Vant](https://vant-contrib.gitee.io/vant/)
-- [VueUse](https://vueuse.org/)
-- [Lodash](https://lodash.com/)
-- [Day.js](https://day.js.org/)
-- [Tailwind CSS](https://tailwindcss.com/)
-
----
-
-## 🟢 Node.js 版本管理（.nvmrc）
-
-项目根目录中包含一个 **`.nvmrc`** 文件，用于指定当前项目推荐使用的**Node.js 版本**。这样可以保证不同开发者或不同机器运行项目时使用一致的 Node环境，避免依赖问题。
-
-### 使用 nvm 切换 Node 版本
-
-如果你安装了 **nvm（Node Version Manager）**，进入项目目录后执行：
-
-``` bash
-nvm use
-```
-
-nvm 会自动读取 `.nvmrc` 文件中的 Node 版本并切换。
-
-### Windows 可能出现的问题
-
-在 **Windows PowerShell** 中，`nvm use` 有时不会自动读取`.nvmrc`，可能会报错或无法切换版本。
-
-如果出现这种情况，可以执行：
-
-``` powershell
-nvm use $(Get-Content .nvmrc)
-```
-
-该命令会读取 `.nvmrc` 文件内容并手动切换 Node 版本。
-
 ---
 
 ## 🔧 常见需要调整的地方（具体文件示例）
 
 ### 1️⃣ 接口请求地址
 
-文件：`src/utils/request.ts`  `src/utils/request.js`  
+文件：`src/utils/request.ts` / `src/utils/request.js`  
+
 ```ts
 import axios from 'axios';
 
@@ -187,7 +161,7 @@ const service = axios.create({
 });
 
 // 示例请求
-export const getUserList = () => request.get('/users');
+export const getUserList = () => service.get('/users');
 
 export default service;
 ```
@@ -198,7 +172,8 @@ export default service;
 
 ### 2️⃣ 本地代理配置
 
-文件：`vite.config.ts`  `vite.config.js`  
+文件：`vite.config.ts` / `vite.config.js`  
+
 ```ts
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
@@ -224,7 +199,8 @@ export default defineConfig({
 
 ### 3️⃣ 路由结构（支持动态参数）
 
-文件：`src/router/index.ts`  `src/router/index.js`  
+文件：`src/router/index.ts` / `src/router/index.js`  
+
 ```ts
 import { createRouter, createWebHistory } from 'vue-router'
 import routes from '~pages'  // 自动生成的路由
@@ -237,14 +213,16 @@ const router = createRouter({
 export default router
 ```
 
-> 🔹 页面文件夹结构示例：
+> 页面文件夹结构示例：
+
 ```text
 src/views/home/
 ├─ index.vue          -> /home
 └─ [id]/[name].vue    -> /home/:id/:name
 ```
 
-> 🔹 获取路由参数：
+> 获取路由参数：
+
 ```ts
 import { useRoute } from 'vue-router'
 const route = useRoute()
@@ -257,6 +235,7 @@ console.log(route.params.name)
 ### 4️⃣ 页面内容与样式
 
 文件示例：`src/views/home/index.vue`  
+
 ```vue
 <template>
   <div class="home-container">
@@ -281,6 +260,64 @@ console.log(route.params.name)
 
 ---
 
+### 5️⃣ Mitt 事件总线使用示例
+
+#### 封装事件总线
+
+文件：`src/utils/eventBus.ts`
+
+```ts
+import mitt from 'mitt'
+
+type Events = {
+  userLogin: { name: string },
+  userLogout: null
+}
+
+const emitter = mitt<Events>()
+
+export default emitter
+```
+
+#### 使用示例
+
+##### 组件 A（发送事件）
+
+```ts
+<script setup lang="ts">
+import eventBus from '@/utils/eventBus'
+
+function login() {
+  eventBus.emit('userLogin', { name: '张三' })
+}
+</script>
+```
+
+##### 组件 B（接收事件）
+
+```ts
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import eventBus from '@/utils/eventBus'
+
+function handleLogin(payload: { name: string }) {
+  console.log('用户登录:', payload.name)
+}
+
+onMounted(() => {
+  eventBus.on('userLogin', handleLogin)
+})
+
+onUnmounted(() => {
+  eventBus.off('userLogin', handleLogin)
+})
+</script>
+```
+
+> 🔹 Mitt 事件总线轻量高效，适合组件间解耦通信，替代父子传递 props / emit 或 Vuex/Pinia 中的小型事件场景。
+
+---
+
 ## 🎯 适用场景
 
 - Vue 3 新手快速上手
@@ -291,6 +328,25 @@ console.log(route.params.name)
 
 ---
 
+## 🌐 技术栈官网链接
+
+- [Vite | 下一代的前端工具链](https://cn.vitejs.dev/)
+- [Vue.js - 渐进式 JavaScript 框架 | Vue.js](https://cn.vuejs.org/)
+- [JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)  
+- [TypeScript](https://www.typescriptlang.org/)  
+- [Vue Router | Vue.js 的官方路由](https://router.vuejs.org/zh/)
+- [Pinia | The intuitive store for Vue.js](https://pinia.vuejs.org/zh/)
+- [Axios](https://www.axios-http.cn/)
+- [Element Plus | 一个 Vue 3 UI 框架](https://element-plus.org/zh-CN/)
+- [Vant 4 - 轻量、可定制的移动端组件库](https://vant-ui.github.io/vant/#/zh-CN)
+- [VueUse](https://vueuse.pages.dev/)
+- [Lodash](https://www.lodashjs.com/)
+- [Day.js](https://day.js.org/)  
+- [Tailwind CSS](https://tailwindcss.com/)  
+- [Mitt](https://github.com/developit/mitt)  
+
+---
+
 ## 📄 License
 
 MIT License

package/template/base-ts/package.json.tpl

@@ -11,17 +11,14 @@
   "dependencies": {
     "less": "^4.5.1",
     "tslib": "^2.8.1",
-    "vue": "^3.5.25"__OPTIONAL_DEP__
+    "vue": "^3.5.30"__OPTIONAL_DEP__
   },
   "devDependencies": {
-    "@types/node": "^24.11.0",
-    "@vitejs/plugin-vue": "^6.0.2",
-    "@vue/tsconfig": "^0.8.1",
+    "@types/node": "^24.12.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.0",
     "typescript": "~5.9.3",
-    "vite": "^8.0.0-beta.13",
-    "vue-tsc": "^3.1.5"
-  },
-  "overrides": {
-    "vite": "^8.0.0-beta.13"
+    "vite": "^8.0.1",
+    "vue-tsc": "^3.2.5"
   }
 }