create-vite-vue 1.3.1 → 1.5.0

package/bin/index.js

@@ -1,17 +1,43 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 import { execSync } from 'child_process'
 import fs from 'fs'
 import path from 'path'
 import prompts from 'prompts'
 import { fileURLToPath } from 'url'
 
+// 检测 Node 版本
+const requiredVersion = '22.19.0'
+
+function compareVersion (v1, v2) {
+  const a = v1.split('.').map(Number)
+  const b = v2.split('.').map(Number)
+
+  for(let i = 0; i < Math.max(a.length, b.length); i++) {
+    const n1 = a[i] || 0
+    const n2 = b[i] || 0
+    if(n1 > n2) return 1
+    if(n1 < n2) return -1
+  }
+  return 0
+}
+
+const currentVersion = process.version.replace('v', '')
+
+if(compareVersion(currentVersion, requiredVersion) < 0) {
+  console.error(`❌ Node.js 版本过低`)
+  console.error(`当前版本: ${currentVersion}`)
+  console.error(`最低要求: ${requiredVersion}`)
+  console.error(`请升级 Node.js 后再运行`)
+  process.exit(1)
+}
+
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
   ; (async () => {
     // 1️⃣ 输入项目名
     let projectName
-    while (true) {
+    while(true) {
       const res = await prompts({
         type: 'text',
         name: 'projectName',
@@ -19,10 +45,10 @@ const __dirname = path.dirname(__filename)
         validate: v => v ? true : '项目名不能为空'
       })
       projectName = res.projectName
-      if (!projectName) process.exit(1)
+      if(!projectName) process.exit(1)
 
       const targetDir = path.resolve(process.cwd(), projectName)
-      if (fs.existsSync(targetDir)) {
+      if(fs.existsSync(targetDir)) {
         console.log('❌ 目录已存在，请重新输入')
         continue
       }
@@ -31,6 +57,7 @@ const __dirname = path.dirname(__filename)
 
     const targetDir = path.resolve(process.cwd(), projectName)
 
+    // 选择语言
     const { language } = await prompts({
       type: 'select',
       name: 'language',
@@ -41,71 +68,50 @@ const __dirname = path.dirname(__filename)
       ]
     })
 
-    // 2️⃣ 功能选择
-    const features = await prompts([
-      {
-        type: 'select',
-        name: 'router',
-        message: '是否使用 vue-router？',
-        choices: [{ title: 'Yes', value: true }, { title: 'No', value: false }]
-      },
-      {
-        type: 'select',
-        name: 'pinia',
-        message: '是否使用 Pinia（含持久化）？',
-        choices: [{ title: 'Yes', value: true }, { title: 'No', value: false }]
-      },
-      {
-        type: 'select',
-        name: 'axios',
-        message: '是否使用 Axios？',
-        choices: [{ title: 'Yes', value: true }, { title: 'No', value: false }]
-      },
-      {
-        type: 'select',
-        name: 'ui',
-        message: '请选择 UI 框架',
-        choices: [
-          { title: 'Element Plus（PC）', value: 'element' },
-          { title: 'Vant（Mobile）', value: 'vant' },
-          { title: '不使用 UI 框架', value: 'none' }
-        ]
-      }
-    ])
-
-    // ========== 新增：增强插件配置==========
-    let extraPlugins = []
-
-    const { wantExtra } = await prompts({
-      type: 'toggle',
-      name: 'wantExtra',
-      message: '是否需要添加额外工具？',
-      initial: false,
-      active: '是',
-      inactive: '否'
-    })
-
-    if (wantExtra) {
-      const pluginOptions = [
+    // 2️⃣ 功能选择（多选）
+    const { featureList } = await prompts({
+      type: 'multiselect',
+      name: 'featureList',
+      message: '请选择基础功能（↑↓选择，空格确认，回车完成）',
+      instructions: false,
+      choices: [
+        { title: 'Vue Router', value: 'router' },
+        { title: 'Pinia（含持久化）', value: 'pinia' },
+        { title: 'Axios', value: 'axios' },
+        { title: 'Element Plus（PC UI）', value: 'element' },
+        { title: 'Vant（Mobile UI）', value: 'vant' },
         { title: 'VueUse（实用 Composition API）', value: 'vueuse' },
-        { title: 'Lodash（实用工具库）', value: 'lodash' },
-        { title: 'Day.js（轻量日期处理）', value: 'dayjs' },
+        { title: 'Lodash（工具库）', value: 'lodash' },
+        { title: 'Day.js（日期处理）', value: 'dayjs' },
         { title: 'Tailwind CSS（原子化 CSS）', value: 'tailwind' }
       ]
+    })
 
-      const { selectedPlugins } = await prompts({
-        type: 'multiselect',
-        name: 'selectedPlugins',
-        message: '请选择额外工具（↑↓选择，空格确认，回车完成）',
-        choices: pluginOptions.map(p => ({ title: p.title, value: p.value })),
-        instructions: false
-      })
+    // 转换成原来的结构（保证后面代码基本不用动）
+    const features = {
+      router: featureList?.includes('router') || false,
+      pinia: featureList?.includes('pinia') || false,
+      axios: featureList?.includes('axios') || false,
+      ui: featureList?.filter(v => ['element', 'vant'].includes(v)) || []
+    }
 
-      if (selectedPlugins?.length) {
-        extraPlugins = selectedPlugins
-      }
+    const extraPlugins = featureList?.filter(v =>
+      ['vueuse', 'lodash', 'dayjs', 'tailwind'].includes(v)
+    ) || []
+
+    // 询问是否开启自动路由
+    let autoRoute = false
+    if(features.router) {
+      const { enableAutoRoute } = await prompts({
+        type: 'toggle',
+        name: 'enableAutoRoute',
+        message: '是否开启自动配置路由（vite-plugin-pages）？',
+        initial: false,
+        active: '是',
+        inactive: '否'
+      })
+      autoRoute = enableAutoRoute
     }
-    // ========== 增强插件配置结束 ==========
 
     // 3️⃣ 是否立即运行 dev
     const { runDev } = await prompts({
@@ -123,21 +129,21 @@ const __dirname = path.dirname(__filename)
       { recursive: true }
     )
 
-    // 4️⃣-1️⃣ 替换 index.html 的 title
+    // 替换 index.html 的 title
     const indexPath = path.join(targetDir, 'index.html')
-    if (fs.existsSync(indexPath)) {
+    if(fs.existsSync(indexPath)) {
       const indexContent = fs.readFileSync(indexPath, 'utf-8')
       fs.writeFileSync(
         indexPath,
         indexContent.replace(/<title>.*<\/title>/, `<title>${projectName}</title>`)
       )
     }
+
     // 追加 Tailwind CSS 导入
-    if (extraPlugins.includes('tailwind')) {
+    if(extraPlugins.includes('tailwind')) {
       const stylePath = path.join(targetDir, 'src/style.css')
       const original = fs.readFileSync(stylePath, 'utf-8')
-      // 在第一行追加，不重复添加
-      if (!original.startsWith('@import "tailwindcss";')) {
+      if(!original.startsWith('@import "tailwindcss";')) {
         fs.writeFileSync(stylePath, `@import "tailwindcss";\n${original}`)
       }
     }
@@ -150,68 +156,56 @@ const __dirname = path.dirname(__filename)
     features.pinia && copy(language === 'ts' ? 'pinia-ts' : 'pinia-js')
     features.axios && copy(language === 'ts' ? 'axios-ts' : 'axios-js')
 
-    // ========== 新增：拷贝增强插件模板 ==========
-    for (const plugin of extraPlugins) {
+    // 拷贝增强插件模板
+    for(const plugin of extraPlugins) {
       const templateName = `${plugin}-${language === 'ts' ? 'ts' : 'js'}`
       const templatePath = path.resolve(__dirname, `../template/${templateName}`)
-      if (fs.existsSync(templatePath)) {
+      if(fs.existsSync(templatePath)) {
         fs.cpSync(templatePath, targetDir, { recursive: true })
       }
     }
-    // ========== 增强插件模板拷贝结束 ==========
 
-    // 6️⃣ 生成 main.js
+    // 6️⃣ 生成 main.js / main.ts
     const mainFile = language === 'ts' ? 'main.ts' : 'main.js'
     const mainTplPath = path.join(targetDir, `src/${mainFile}.tpl`)
     let main = fs.readFileSync(mainTplPath, 'utf-8')
 
     const replacements = {
-      // import
-      // vue-router
       '/* __ROUTER_IMPORT__ */': features.router ? "import router from './router'" : '',
-      // pinia
       '/* __PINIA_IMPORT__ */': features.pinia
         ? "import { createPinia } from 'pinia'\nimport persistedstate from 'pinia-plugin-persistedstate'"
         : '',
-      // element-plus
-      '/* __ELEMENT_IMPORT__ */': features.ui === 'element'
+      '/* __ELEMENT_IMPORT__ */': features.ui.includes('element')
         ? `import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'`
         : '',
-      // vant
-      '/* __VANT_IMPORT__ */': features.ui === 'vant'
+      '/* __VANT_IMPORT__ */': features.ui.includes('vant')
         ? `import Vant from 'vant'
 import 'vant/lib/index.css'`
         : '',
-      // use
-      //router
       '/* __ROUTER_USE__ */': features.router ? 'app.use(router)' : '',
-      // pinia
       '/* __PINIA_USE__ */': features.pinia
         ? 'app.use(createPinia().use(persistedstate))'
         : '',
-      // element-plus
-      '/* __ELEMENT_USE__ */': features.ui === 'element'
+      '/* __ELEMENT_USE__ */': features.ui.includes('element')
         ? `app.use(ElementPlus, { locale: zhCn })
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }`
         : '',
-      // vant
-      '/* __VANT_USE__ */': features.ui === 'vant'
+      '/* __VANT_USE__ */': features.ui.includes('vant')
         ? 'app.use(Vant)'
         : ''
     }
-    // ========== 增强插件占位符结束 ==========
 
     function escapeRegExp (str) {
       return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
     }
 
-    for (const [placeholder, content] of Object.entries(replacements)) {
-      if (content) {
+    for(const [placeholder, content] of Object.entries(replacements)) {
+      if(content) {
         main = main.replace(placeholder, content)
       } else {
         const re = new RegExp(`^\\s*${escapeRegExp(placeholder)}\\s*$\\n?`, 'gm')
@@ -222,42 +216,37 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     main = main.replace(/(\s*)const app = createApp\(App\)/, '\n\n$1const app = createApp(App)')
     main = main.replace(/\n{3,}/g, '\n\n')
 
-    fs.writeFileSync(
-      path.join(targetDir, `src/${mainFile}`),
-      main
-    )
+    fs.writeFileSync(path.join(targetDir, `src/${mainFile}`), main)
     fs.unlinkSync(mainTplPath)
 
     // 7️⃣ 生成 package.json
     const pkgTpl = path.join(targetDir, 'package.json.tpl')
-    if (fs.existsSync(pkgTpl)) {
+    if(fs.existsSync(pkgTpl)) {
       let pkg = fs.readFileSync(pkgTpl, 'utf-8')
 
       const optionalDeps = {}
-      if (features.router) optionalDeps['vue-router'] = '^4.4.0'
-      if (features.pinia) {
-        optionalDeps['pinia'] = '^2.2.2'
-        optionalDeps['pinia-plugin-persistedstate'] = '^3.2.1'
+      if(features.router) optionalDeps['vue-router'] = '^5.0.3'
+      if(features.pinia) {
+        optionalDeps['pinia'] = '^3.0.4'
+        optionalDeps['pinia-plugin-persistedstate'] = '^4.7.1'
       }
-      if (features.axios) optionalDeps['axios'] = '^1.7.7'
-      if (features.ui === 'element') {
-        optionalDeps['element-plus'] = '^2.8.8'
-        optionalDeps['@element-plus/icons-vue'] = '^2.3.1'
+      if(features.axios) optionalDeps['axios'] = '^1.13.6'
+      if(features.ui.includes('element')) {
+        optionalDeps['element-plus'] = '^2.13.3'
+        optionalDeps['@element-plus/icons-vue'] = '^2.3.2'
       }
-      if (features.ui === 'vant') {
+      if(features.ui.includes('vant')) {
         optionalDeps['vant'] = '^4.9.22'
       }
-
-      // ========== 新增：增强插件的依赖 ==========
-      if (extraPlugins.includes('vueuse')) optionalDeps['@vueuse/core'] = '^14.1.0'
-      if (extraPlugins.includes('dayjs')) optionalDeps['dayjs'] = '^1.11.19'
-      if (extraPlugins.includes('lodash')) optionalDeps['lodash'] = '^4.17.23'
-
-      // ========== 增强插件依赖结束 ==========
+      // 增强插件依赖
+      if(extraPlugins.includes('vueuse')) optionalDeps['@vueuse/core'] = '^14.2.1'
+      if(extraPlugins.includes('dayjs')) optionalDeps['dayjs'] = '^1.11.19'
+      if(extraPlugins.includes('lodash')) optionalDeps['lodash'] = '^4.17.23'
+      if(autoRoute) optionalDeps['vite-plugin-pages'] = '^0.33.3'
 
       let depsStr = ''
       const keys = Object.keys(optionalDeps)
-      if (keys.length > 0) {
+      if(keys.length > 0) {
         depsStr = ',\n' + keys.map(k => `    "${k}": "${optionalDeps[k]}"`).join(',\n')
       }
 
@@ -269,18 +258,118 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
       fs.unlinkSync(pkgTpl)
     }
 
-    // 8️⃣ 安装依赖
+    // 8️⃣ 配置自动路由
+    if(autoRoute) {
+      const viteConfigPath = path.join(targetDir, `vite.config.${language === 'ts' ? 'ts' : 'js'}`)
+      if(fs.existsSync(viteConfigPath)) {
+        let viteConfig = fs.readFileSync(viteConfigPath, 'utf-8')
+        if(!viteConfig.includes("import fs from 'fs'")) {
+          viteConfig = `import fs from 'fs'\n${viteConfig}`
+        }
+        // 确保顶部 import Pages
+        if(!viteConfig.includes("import Pages from 'vite-plugin-pages'")) {
+          viteConfig = viteConfig.replace(/(import .*?from .*?\n)/, `$1import Pages from 'vite-plugin-pages'\n`)
+        }
+        viteConfig = viteConfig.replace(/plugins:\s*\[/, `plugins: [
+    Pages({
+      dirs: 'src/views',
+      extensions: ['vue'],
+      exclude: ['**/_*.vue'],
+      async extendRoute(route) {
+        const componentPath = path.resolve(process.cwd(), route.component.slice(1))
+        const dirPath = path.dirname(componentPath)
+        const metaFile = path.resolve(dirPath, 'meta.json')
+        if(fs.existsSync(metaFile)) {
+          try {
+            const metaContent = fs.readFileSync(metaFile, 'utf-8')
+            const meta = JSON.parse(metaContent)
+            route.meta = { ...(route.meta || {}), ...meta }
+          } catch(err) {
+            console.warn(\`加载 \${metaFile} 失败:\`, err)
+          }
+        }
+        return { ...route }
+      }
+    }),`)
+        fs.writeFileSync(viteConfigPath, viteConfig)
+      }
+
+      // 创建 Home/meta.json
+      const homeMetaPath = path.join(targetDir, 'src/views/home/meta.json')
+      if(!fs.existsSync(homeMetaPath)) {
+        fs.writeFileSync(homeMetaPath, JSON.stringify({ title: '首页' }, null, 2))
+      }
+      if(language === 'ts') {
+        // 生成 types 目录
+        const typesDir = path.join(targetDir, 'src/types')
+        if(!fs.existsSync(typesDir)) fs.mkdirSync(typesDir, { recursive: true })
+
+        // 创建 vite-plugin-pages.d.ts
+        const vitePagesDtsPath = path.join(typesDir, 'vite-plugin-pages.d.ts')
+        const vitePagesDtsContent = `declare module '~pages' {
+  import type { RouteRecordRaw } from 'vue-router'
+  const routes: RouteRecordRaw[]
+  export default routes
+}
+`
+        fs.writeFileSync(vitePagesDtsPath, vitePagesDtsContent)
+      }
+
+    }
+
+    // 9️⃣ 替换 router/index.js
+    if(features.router) {
+      const routerIndexPath = path.join(targetDir, `src/router/index.${language === 'ts' ? 'ts' : 'js'}`)
+      if(autoRoute) {
+        fs.writeFileSync(
+          routerIndexPath,
+          `import { createRouter, createWebHistory } from 'vue-router'
+import routes from '~pages'
+
+routes.unshift({
+  path: '/',
+  redirect: '/home'
+})
+
+export default createRouter({
+  history: createWebHistory(),
+  routes
+})
+`
+        )
+      } else {
+        fs.writeFileSync(
+          routerIndexPath,
+          `import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/views/home/index.vue')
+  }
+]
+
+export default createRouter({
+  history: createWebHistory(),
+  routes
+})
+`
+        )
+      }
+    }
+
+    // 1️⃣0️⃣ 安装依赖
     console.log('📦 安装依赖中...')
     execSync('npm install', { cwd: targetDir, stdio: 'inherit' })
-    if (extraPlugins.includes('tailwind')) {
+    if(extraPlugins.includes('tailwind')) {
       execSync('npm install tailwindcss @tailwindcss/postcss postcss', { cwd: targetDir, stdio: 'inherit' })
     }
 
-    // 9️⃣ 运行 dev
-    if (runDev) {
+    // 1️⃣1️⃣ 运行 dev
+    if(runDev) {
       console.log('🚀 启动开发服务器...')
       execSync('npm run dev', { cwd: targetDir, stdio: 'inherit' })
     } else {
       console.log(`\n✅ 项目创建完成\n👉 cd ${projectName}\n👉 npm run dev\n`)
     }
-  })()
+  })()

package/package.json

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

package/template/base-js/README.md

@@ -9,7 +9,7 @@
 
 - ⚡ 基于 Vite + Vue 3，启动快、构建快
 - 📜 支持 JavaScript / TypeScript 自由选择
-- 🧭 可选集成 Vue Router
+- 🧭 可选集成 Vue Router（支持动态参数路由）
 - 🗂️ 可选集成 Pinia（含持久化）
 - 📡 内置 Axios 请求方案
 - 🖥️ / 📱 支持 Element Plus / Vant
@@ -70,6 +70,11 @@ project-name
 │  ├─ types/                 —— 类型声明文件  
 │  ├─ utils/                 —— 工具方法、请求封装  
 │  ├─ views/                 —— 页面级组件（路由页面）  
+│  │  └─ home/               —— 示例页面文件夹
+│  │     ├─ index.vue         —— 默认首页 /home
+│  │     ├─ meta.json         —— 页面 meta 信息
+│  │     └─ [id]/             —— 动态参数路由示例
+│  │         └─ [name].vue    —— 路由 /home/:id/:name
 │  ├─ App.vue                —— 根组件  
 │  ├─ main.js / main.ts      —— 项目启动入口  
 │  └─ style.css              —— 全局样式文件  
@@ -125,18 +130,18 @@ npm run dev
 ## 🌐 技术栈官网链接
 
 - [Vite](https://vitejs.dev/)
-- [Vue 3](https://vuejs.org/) 
+- [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/) 
+- [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/)
+- [Tailwind CSS](https://tailwindcss.com/)
 
 ---
 
@@ -189,33 +194,41 @@ export default defineConfig({
 
 ---
 
-### 3️⃣ 路由结构
+### 3️⃣ 路由结构（支持动态参数）
 
 文件：`src/router/index.ts`  `src/router/index.js`  
 ```ts
-import { createRouter, createWebHistory } from 'vue-router';
-import Home from '../views/Home.vue';
-
-const routes = [
-  { path: '/', name: 'Home', component: Home },
-  { path: '/about', name: 'About', component: () => import('../views/About.vue') },
-];
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from '~pages'  // 自动生成的路由
 
 const router = createRouter({
   history: createWebHistory(),
-  routes,
-});
+  routes
+})
+
+export default router
+```
 
-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()
+console.log(route.params.id)
+console.log(route.params.name)
+```
 
 ---
 
 ### 4️⃣ 页面内容与样式
 
-文件示例：`src/views/Home.vue`  
+文件示例：`src/views/home/index.vue`  
 ```vue
 <template>
   <div class="home-container">

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

@@ -11,13 +11,13 @@
   "dependencies": {
     "less": "^4.5.1",
     "tslib": "^2.8.1",
-    "vue": "^3.5.24"__OPTIONAL_DEP__
+    "vue": "^3.5.25"__OPTIONAL_DEP__
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.1",
-    "vite": "npm:rolldown-vite@7.2.5"
+    "@vitejs/plugin-vue": "^6.0.2",
+    "vite": "^8.0.0-beta.13"
   },
   "overrides": {
-    "vite": "npm:rolldown-vite@7.2.5"
+    "vite": "^8.0.0-beta.13"
   }
 }

package/template/base-ts/README.md

@@ -9,7 +9,7 @@
 
 - ⚡ 基于 Vite + Vue 3，启动快、构建快
 - 📜 支持 JavaScript / TypeScript 自由选择
-- 🧭 可选集成 Vue Router
+- 🧭 可选集成 Vue Router（支持动态参数路由）
 - 🗂️ 可选集成 Pinia（含持久化）
 - 📡 内置 Axios 请求方案
 - 🖥️ / 📱 支持 Element Plus / Vant
@@ -70,6 +70,11 @@ project-name
 │  ├─ types/                 —— 类型声明文件  
 │  ├─ utils/                 —— 工具方法、请求封装  
 │  ├─ views/                 —— 页面级组件（路由页面）  
+│  │  └─ home/               —— 示例页面文件夹
+│  │     ├─ index.vue         —— 默认首页 /home
+│  │     ├─ meta.json         —— 页面 meta 信息
+│  │     └─ [id]/             —— 动态参数路由示例
+│  │         └─ [name].vue    —— 路由 /home/:id/:name
 │  ├─ App.vue                —— 根组件  
 │  ├─ main.js / main.ts      —— 项目启动入口  
 │  └─ style.css              —— 全局样式文件  
@@ -125,18 +130,18 @@ npm run dev
 ## 🌐 技术栈官网链接
 
 - [Vite](https://vitejs.dev/)
-- [Vue 3](https://vuejs.org/) 
+- [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/) 
+- [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/)
+- [Tailwind CSS](https://tailwindcss.com/)
 
 ---
 
@@ -189,33 +194,41 @@ export default defineConfig({
 
 ---
 
-### 3️⃣ 路由结构
+### 3️⃣ 路由结构（支持动态参数）
 
 文件：`src/router/index.ts`  `src/router/index.js`  
 ```ts
-import { createRouter, createWebHistory } from 'vue-router';
-import Home from '../views/Home.vue';
-
-const routes = [
-  { path: '/', name: 'Home', component: Home },
-  { path: '/about', name: 'About', component: () => import('../views/About.vue') },
-];
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from '~pages'  // 自动生成的路由
 
 const router = createRouter({
   history: createWebHistory(),
-  routes,
-});
+  routes
+})
+
+export default router
+```
 
-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()
+console.log(route.params.id)
+console.log(route.params.name)
+```
 
 ---
 
 ### 4️⃣ 页面内容与样式
 
-文件示例：`src/views/Home.vue`  
+文件示例：`src/views/home/index.vue`  
 ```vue
 <template>
   <div class="home-container">

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

@@ -11,17 +11,17 @@
   "dependencies": {
     "less": "^4.5.1",
     "tslib": "^2.8.1",
-    "vue": "^3.5.24"__OPTIONAL_DEP__
+    "vue": "^3.5.25"__OPTIONAL_DEP__
   },
   "devDependencies": {
-    "@types/node": "^24.10.4",
-    "@vitejs/plugin-vue": "^6.0.1",
+    "@types/node": "^24.11.0",
+    "@vitejs/plugin-vue": "^6.0.2",
     "@vue/tsconfig": "^0.8.1",
     "typescript": "~5.9.3",
-    "vite": "npm:rolldown-vite@7.2.5",
-    "vue-tsc": "^3.1.4"
+    "vite": "^8.0.0-beta.13",
+    "vue-tsc": "^3.1.5"
   },
   "overrides": {
-    "vite": "npm:rolldown-vite@7.2.5"
+    "vite": "^8.0.0-beta.13"
   }
 }

package/template/router-js/src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

package/template/router-js/src/router/index.js

@@ -3,7 +3,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
   {
     path: '/',
-    component: () => import('@/views/Home.vue')
+    component: () => import('@/views/home/index.vue')
   }
 ]
 

package/template/router-ts/src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

package/template/router-ts/src/router/index.ts

@@ -3,7 +3,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
   {
     path: '/',
-    component: () => import('@/views/Home.vue')
+    component: () => import('@/views/home/index.vue')
   }
 ]