create-vite-vue 1.3.1 → 1.4.0

package/bin/index.js

@@ -11,7 +11,7 @@ const __dirname = path.dirname(__filename)
   ; (async () => {
     // 1️⃣ 输入项目名
     let projectName
-    while (true) {
+    while(true) {
       const res = await prompts({
         type: 'text',
         name: 'projectName',
@@ -19,10 +19,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 +31,7 @@ const __dirname = path.dirname(__filename)
 
     const targetDir = path.resolve(process.cwd(), projectName)
 
+    // 选择语言
     const { language } = await prompts({
       type: 'select',
       name: 'language',
@@ -73,7 +74,21 @@ const __dirname = path.dirname(__filename)
       }
     ])
 
-    // ========== 新增：增强插件配置==========
+    // 询问是否开启自动路由
+    let autoRoute = false
+    if(features.router) {
+      const { enableAutoRoute } = await prompts({
+        type: 'toggle',
+        name: 'enableAutoRoute',
+        message: '是否开启自动配置路由（vite-plugin-pages）？',
+        initial: false,
+        active: '是',
+        inactive: '否'
+      })
+      autoRoute = enableAutoRoute
+    }
+
+    // ========== 新增：增强插件配置 ==========
     let extraPlugins = []
 
     const { wantExtra } = await prompts({
@@ -85,7 +100,7 @@ const __dirname = path.dirname(__filename)
       inactive: '否'
     })
 
-    if (wantExtra) {
+    if(wantExtra) {
       const pluginOptions = [
         { title: 'VueUse（实用 Composition API）', value: 'vueuse' },
         { title: 'Lodash（实用工具库）', value: 'lodash' },
@@ -101,7 +116,7 @@ const __dirname = path.dirname(__filename)
         instructions: false
       })
 
-      if (selectedPlugins?.length) {
+      if(selectedPlugins?.length) {
         extraPlugins = selectedPlugins
       }
     }
@@ -123,21 +138,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 +165,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'
         ? `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'
         ? `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'
         ? `app.use(ElementPlus, { locale: zhCn })
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }`
         : '',
-      // vant
       '/* __VANT_USE__ */': features.ui === '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 +225,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) {
+      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.axios) optionalDeps['axios'] = '^1.7.7'
-      if (features.ui === 'element') {
+      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.ui === 'vant') {
+      if(features.ui === '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.1.0'
+      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 +267,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.4.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

@@ -15,9 +15,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
-    "vite": "npm:rolldown-vite@7.2.5"
+    "vite": "npm:rolldown-vite@latest"
   },
   "overrides": {
-    "vite": "npm:rolldown-vite@7.2.5"
+    "vite": "npm:rolldown-vite@latest"
   }
 }

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

@@ -18,10 +18,10 @@
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
     "typescript": "~5.9.3",
-    "vite": "npm:rolldown-vite@7.2.5",
+    "vite": "npm:rolldown-vite@latest",
     "vue-tsc": "^3.1.4"
   },
   "overrides": {
-    "vite": "npm:rolldown-vite@7.2.5"
+    "vite": "npm:rolldown-vite@latest"
   }
 }

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')
   }
 ]