create-vite-vue 1.4.0 → 1.5.1

package/README.md

@@ -0,0 +1,269 @@
+# ⚡ create-vite-vue
+
+🚀 一个开箱即用的 Vue 3 项目快速生成工具  
+基于 Vite 构建，支持按需组合常用技术栈，直接生成可落地的项目结构。
+
+---
+
+## ✨ 特性一览
+
+- ⚡ 基于 Vite + Vue 3，启动快、构建快
+- 📜 支持 JavaScript / TypeScript 自由选择
+- 🧭 可选集成 Vue Router（支持动态参数路由）
+- 🗂️ 可选集成 Pinia（含持久化）
+- 📡 内置 Axios 请求方案
+- 🖥️ / 📱 支持 Element Plus / Vant
+- 🧰 常用工具库可选：VueUse / Lodash / Day.js
+- 🧩 结构清晰，适合直接写业务
+- 🔧 内置 Vite 配置优化构建输出和资源路径
+- 🌐 本地及网络访问启动日志显示
+- 📝 自定义 Banner 插件显示项目信息
+- 🎨 可选集成 Tailwind CSS（通过 postcss 配置）
+
+---
+
+## 🧩 技术栈
+
+⚡ Vite  
+🟢 Vue 3  
+📜 JavaScript / 🔷 TypeScript  
+🧭 Vue Router  
+🗂️ Pinia  
+📡 Axios  
+🖥️ Element Plus / 📱 Vant  
+🧰 VueUse · Lodash · Day.js  
+🎨 Tailwind CSS  
+
+---
+
+## 📦 生成后的项目包含什么？
+
+根据你的选择，工具会自动生成一个标准化 Vue 3 项目结构，主要包括：
+
+### 基础内容（必选）
+
+- 项目入口页面
+- src 源码目录
+- 项目启动入口文件
+- 根组件与默认欢迎页
+- 全局样式文件
+- Vite 配置文件
+- 依赖管理文件（已自动注入所选功能）
+- 路径别名配置（@ 指向 src）
+- postcss.config.mjs（Tailwind CSS 配置，可选）
+
+这些内容已经帮你处理好基础配置，可直接开始开发，无需清理模板代码。
+
+---
+
+## 📁 项目目录结构说明
+
+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**：项目说明文档
+
+---
+
+## ⚙️ 使用方式
+
+1. 创建项目  
+```bash
+npm create vite-vue@latest
+```
+
+2. 进入项目目录  
+```bash
+cd 项目名
+```
+
+3. 安装依赖  (已自动执行可省略)  
+```bash
+npm install
+```
+
+4. 启动开发环境  
+```bash
+npm run 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/)
+
+---
+
+## 🔧 常见需要调整的地方（具体文件示例）
+
+### 1️⃣ 接口请求地址
+
+文件：`src/utils/request.ts`  `src/utils/request.js`  
+```ts
+import axios from 'axios';
+
+const service = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || '/api', // 修改为你的接口地址
+  timeout: 10000,
+});
+
+// 示例请求
+export const getUserList = () => request.get('/users');
+
+export default service;
+```
+
+> 🔹 根据实际业务修改 `baseURL` 和各个接口方法。  
+
+---
+
+### 2️⃣ 本地代理配置
+
+文件：`vite.config.ts`  `vite.config.js`  
+```ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000', // 修改为后端服务地址
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
+});
+```
+
+> 🔹 如果接口路径前有 `/api` 前缀，可通过代理去掉  
+> 🔹 根据本地后端环境调整 `target`  
+
+---
+
+### 3️⃣ 路由结构（支持动态参数）
+
+文件：`src/router/index.ts`  `src/router/index.js`  
+```ts
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from '~pages'  // 自动生成的路由
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+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/index.vue`  
+```vue
+<template>
+  <div class="home-container">
+    <h1>欢迎来到项目首页</h1>
+    <p>这里可以根据业务需求修改页面内容和样式</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 可引入接口数据
+// import { getUserList } from '@/api'
+</script>
+
+<style scoped>
+.home-container {
+  padding: 20px;
+}
+</style>
+```
+
+> 🔹 根据实际业务修改 HTML、样式、以及调用接口逻辑  
+
+---
+
+## 🎯 适用场景
+
+- Vue 3 新手快速上手
+- 后台管理系统
+- 中小型 Web 项目
+- 练手项目 / 毕设 / 实战项目
+- 不想每次重复配置环境的开发者
+
+---
+
+## 📄 License
+
+MIT License
+

package/bin/index.js

@@ -1,10 +1,36 @@
-#!/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)
 
@@ -42,37 +68,36 @@ 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' }
-        ]
-      }
-    ])
+    // 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: 'Tailwind CSS（原子化 CSS）', value: 'tailwind' }
+      ]
+    })
+
+    // 转换成原来的结构（保证后面代码基本不用动）
+    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)) || []
+    }
+
+    const extraPlugins = featureList?.filter(v =>
+      ['vueuse', 'lodash', 'dayjs', 'tailwind'].includes(v)
+    ) || []
 
     // 询问是否开启自动路由
     let autoRoute = false
@@ -88,40 +113,6 @@ const __dirname = path.dirname(__filename)
       autoRoute = enableAutoRoute
     }
 
-    // ========== 新增：增强插件配置 ==========
-    let extraPlugins = []
-
-    const { wantExtra } = await prompts({
-      type: 'toggle',
-      name: 'wantExtra',
-      message: '是否需要添加额外工具？',
-      initial: false,
-      active: '是',
-      inactive: '否'
-    })
-
-    if(wantExtra) {
-      const pluginOptions = [
-        { title: 'VueUse（实用 Composition API）', value: 'vueuse' },
-        { 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
-      })
-
-      if(selectedPlugins?.length) {
-        extraPlugins = selectedPlugins
-      }
-    }
-    // ========== 增强插件配置结束 ==========
-
     // 3️⃣ 是否立即运行 dev
     const { runDev } = await prompts({
       type: 'select',
@@ -184,13 +175,13 @@ const __dirname = path.dirname(__filename)
       '/* __PINIA_IMPORT__ */': features.pinia
         ? "import { createPinia } from 'pinia'\nimport persistedstate from 'pinia-plugin-persistedstate'"
         : '',
-      '/* __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_IMPORT__ */': features.ui === 'vant'
+      '/* __VANT_IMPORT__ */': features.ui.includes('vant')
         ? `import Vant from 'vant'
 import 'vant/lib/index.css'`
         : '',
@@ -198,13 +189,13 @@ import 'vant/lib/index.css'`
       '/* __PINIA_USE__ */': features.pinia
         ? 'app.use(createPinia().use(persistedstate))'
         : '',
-      '/* __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_USE__ */': features.ui === 'vant'
+      '/* __VANT_USE__ */': features.ui.includes('vant')
         ? 'app.use(Vant)'
         : ''
     }
@@ -234,21 +225,21 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
       let pkg = fs.readFileSync(pkgTpl, 'utf-8')
 
       const optionalDeps = {}
-      if(features.router) optionalDeps['vue-router'] = '^4.4.0'
+      if(features.router) optionalDeps['vue-router'] = '^5.0.3'
       if(features.pinia) {
-        optionalDeps['pinia'] = '^2.2.2'
-        optionalDeps['pinia-plugin-persistedstate'] = '^3.2.1'
+        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('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'
@@ -369,11 +360,18 @@ export default createRouter({
 
     // 1️⃣0️⃣ 安装依赖
     console.log('📦 安装依赖中...')
-    execSync('npm install', { cwd: targetDir, stdio: 'inherit' })
+    // execSync('npm install', { cwd: targetDir, stdio: 'inherit' })
+    // if(extraPlugins.includes('tailwind')) {
+    //   execSync('npm install tailwindcss @tailwindcss/postcss postcss', { cwd: targetDir, stdio: 'inherit' })
+    // }
+    let installCmd = 'npm install'
+
     if(extraPlugins.includes('tailwind')) {
-      execSync('npm install tailwindcss @tailwindcss/postcss postcss', { cwd: targetDir, stdio: 'inherit' })
+      installCmd += ' tailwindcss @tailwindcss/postcss postcss'
     }
 
+    execSync(installCmd, { cwd: targetDir, stdio: 'inherit' })
+
     // 1️⃣1️⃣ 运行 dev
     if(runDev) {
       console.log('🚀 启动开发服务器...')

package/package.json

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

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@latest"
+    "@vitejs/plugin-vue": "^6.0.2",
+    "vite": "^8.0.0-beta.13"
   },
   "overrides": {
-    "vite": "npm:rolldown-vite@latest"
+    "vite": "^8.0.0-beta.13"
   }
 }

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@latest",
-    "vue-tsc": "^3.1.4"
+    "vite": "^8.0.0-beta.13",
+    "vue-tsc": "^3.1.5"
   },
   "overrides": {
-    "vite": "npm:rolldown-vite@latest"
+    "vite": "^8.0.0-beta.13"
   }
 }