@aibai/create-myvue 0.0.1

package/README.md

@@ -0,0 +1,132 @@
+# create-my-vue
+
+一个对 `pnpm create vue@latest` 命令的二次封装，支持通过配置文件自定义默认选项。
+
+## 安装
+
+```bash
+# 全局安装
+npm install -g create-my-vue
+
+# 或者使用 npx
+npx create-my-vue
+```
+
+## 使用方法
+
+### 基本使用
+
+```bash
+# 使用默认配置创建项目
+create-my-vue
+
+# 指定项目名称
+create-my-vue my-vue-project
+
+# 使用默认选项
+create-my-vue --default
+```
+
+### 命令行选项
+
+```
+Usage: create-my-vue [options] [projectName]
+
+A wrapper around pnpm create vue@latest with custom defaults
+
+Arguments:
+  projectName          Name of the project to create
+
+Options:
+  -V, --version        output the version number
+  -d, --default        Use default options
+  --typescript         Add TypeScript
+  --no-typescript      Do not add TypeScript
+  --jsx                Add JSX Support
+  --no-jsx             Do not add JSX Support
+  --router             Add Vue Router
+  --no-router          Do not add Vue Router
+  --pinia              Add Pinia
+  --no-pinia           Do not add Pinia
+  --vitest             Add Vitest for unit testing
+  --no-vitest          Do not add Vitest for unit testing
+  --cypress            Add Cypress for end-to-end testing
+  --no-cypress         Do not add Cypress for end-to-end testing
+  --eslint             Add ESLint for code quality
+  --no-eslint          Do not add ESLint for code quality
+  --prettier           Add Prettier for code formatting
+  --no-prettier        Do not add Prettier for code formatting
+  -h, --help           display help for command
+```
+
+## 配置文件
+
+你可以在当前目录下创建 `create-my-vue.config.js` 文件来自定义默认选项。
+
+### 配置示例
+
+```javascript
+// create-my-vue.config.js
+module.exports = {
+  // 项目名称（可选，也可以通过命令行参数指定）
+  // projectName: 'my-vue-project',
+  
+  // 使用默认配置（等同于 --default）
+  // default: true,
+  
+  // 具体选项配置
+  typescript: true,     // 添加 TypeScript
+  jsx: true,            // 添加 JSX 支持
+  router: true,         // 添加 Vue Router
+  pinia: true,          // 添加 Pinia
+  vitest: true,         // 添加 Vitest 用于单元测试
+  cypress: false,       // 不添加 Cypress 用于端到端测试
+  eslint: true,         // 添加 ESLint 用于代码质量
+  prettier: true        // 添加 Prettier 用于代码格式化
+};
+```
+
+### 配置优先级
+
+命令行参数的优先级高于配置文件，例如：
+
+```bash
+# 即使配置文件中 typescript 为 false，这里也会创建 TypeScript 项目
+create-my-vue --typescript
+```
+
+## 示例
+
+### 1. 使用配置文件创建项目
+
+1. 创建 `create-my-vue.config.js` 文件：
+   ```javascript
+   module.exports = {
+     typescript: true,
+     router: true,
+     pinia: true,
+     eslint: true,
+     prettier: true
+   };
+   ```
+
+2. 运行命令：
+   ```bash
+   create-my-vue my-vue-app
+   ```
+
+### 2. 直接使用命令行选项
+
+```bash
+create-my-vue my-vue-app --typescript --router --pinia --eslint --prettier
+```
+
+### 3. 使用默认选项
+
+```bash
+create-my-vue my-vue-app --default
+```
+
+## 许可证
+
+ISC

package/bin/cli.js

@@ -0,0 +1,1114 @@
+const { program } = require('commander');
+const { spawn } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const inquirer = require('inquirer');
+
+// 插件配置
+const plugins = [
+  {
+    name: 'unplugin-auto-import',
+    description: '按需引入 Vue 相关 API',
+    dependencies: ['unplugin-auto-import'],
+    config: {
+      vite: {
+        imports: [`import AutoImport from 'unplugin-auto-import/vite'`],
+        plugins: [
+          `AutoImport({
+            include: [
+              /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+              /\.vue$/,
+              /\.vue\?vue/ // .vue
+            ],
+            imports: [
+              'vue',
+              'vue-router',
+              'pinia'
+            ],
+            dts: 'src/types/auto-import.d.ts',
+            eslintrc: {
+              enabled: true,
+              filepath: './.eslintrc-auto-import.json',
+              globalsPropValue: true,
+            },
+          }),`
+        ]
+      }
+    }
+  },
+  {
+    name: 'unplugin-vue-components',
+    description: '按需引入 Vue 组件',
+    dependencies: ['unplugin-vue-components'],
+    config: {
+      vite: {
+        imports: [`import Components from 'unplugin-vue-components/vite'`],
+        plugins: [
+          `Components({
+            dirs: ['src/components'],
+            extensions: ['vue'],
+            dts: 'src/types/auto-components.d.ts',
+            resolvers: []
+          }),`
+        ]
+      }
+    }
+  },
+  {
+    name: 'unocss',
+    description: '按需引入 UnoCSS 样式',
+    dependencies: ['unocss'],
+    config: {
+      vite: {
+        imports: [`import UnoCSS from 'unocss/vite'`],
+        plugins: [
+          `UnoCSS()`
+        ]
+      },
+      files: [
+        {
+          path: 'uno.config.ts',
+          content: `
+            import { defineConfig, transformerDirectives, transformerVariantGroup } from 'unocss'
+
+            export default defineConfig({theme: {
+                colors: {
+                  primary: 'var(--primary-color)',
+                },
+              },
+              shortcuts: {
+                'content': 'relative max-w-[1024px] mx-auto',
+                'btn': '',
+              },
+              transformers: [
+                transformerDirectives(),
+                transformerVariantGroup()
+              ]
+            })
+          `
+        },
+        {
+          path: 'src/main.js',
+          content: "import 'virtual:uno.css';\n",
+          append: true
+        }
+      ]
+    }
+  },
+  {
+    name: 'vite-plugin-svg-icons',
+    description: '用于创建 SVG 精灵的 Vite 插件',
+    dependencies: ['vite-plugin-svg-icons'],
+    config: {
+      vite: {
+        imports: [`import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'`],
+        plugins: [
+          `createSvgIconsPlugin({
+            // 指定需要缓存的图标文件夹
+            iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+            // 指定symbolId格式
+            symbolId: 'icon-[dir]-[name]',
+          }),`
+        ]
+      },
+      files: [
+        {
+          path: 'src/components/Icon.vue',
+          content: `
+            <script setup lang="ts">
+              import { computed } from 'vue';
+              
+              const props = defineProps({
+                prefix: { type: String, default: 'icon', },
+                iconName: { type: String, required: true, },
+                color: { type: String, default: '' }
+              })
+
+              const symbolId = computed(() => '#' + props.prefix + '-' + props.iconName);
+              </script>
+
+              <template>
+                <svg aria-hidden="true" class="svg-icon">
+                  <use :xlink:href="symbolId" :fill="color" />
+                </svg>
+              </template>
+
+              <style>
+              .svg-icon {
+                width: 1em;
+                height: 1em;
+                vertical-align: -0.15em;
+                overflow: hidden;
+                fill: currentColor;
+              }
+              </style>
+          `
+        },
+        {
+          path: 'src/main.js',
+          content: "import 'virtual:svg-icons-register';\n",
+          append: true
+        }
+      ]
+    }
+  },
+  {
+    name: 'axios',
+    description: '基于 Promise 的 HTTP 客户端，用于浏览器和 node.js',
+    dependencies: ['axios'],
+    config: {
+      files: [
+        {
+          path: 'src/utils/axiosConfig.ts',
+          content: `
+            // axios 配置文件
+            // 定义全局axios配置，包括基础URL、超时时间、响应格式验证等
+
+            // API基础URL，使用相对路径以便通过Vite代理转发
+            export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://110.41.59.11/api';
+            // 注意：请勿使用绝对URL，否则会绕过Vite代理
+
+            // 请求超时时间（毫秒）
+            export const REQUEST_TIMEOUT = 40000;
+
+            // 响应数据格式验证
+            export const validateResponseFormat = (data: unknown): boolean => {
+              return typeof data === 'object' && data !== null;
+            };
+
+            // 错误消息映射
+            export const errorMessageMap: Record<number, string> = {
+              400: '请求参数错误',
+              401: '未授权，请重新登录',
+              403: '拒绝访问',
+              404: '请求的资源不存在',
+              405: '请求方法不允许',
+              500: '服务器内部错误',
+              502: '网关错误',
+              503: '服务不可用',
+              504: '网关超时',
+            };
+
+          `
+        },
+        {
+          path: 'src/utils/axiosInstance.ts',
+          content: `
+            // axios 实例封装
+            import axios, { type AxiosRequestConfig, type AxiosError } from 'axios';
+            import { API_BASE_URL, REQUEST_TIMEOUT } from './axiosConfig';
+            import { handleAxiosError, isBusinessError, formatBusinessError } from './errorHandler';
+
+            interface HttpResponse<T = unknown> {
+              code: number;
+              msg: string;
+              data: T;
+            }
+
+            // 创建axios实例
+            const http = axios.create({
+              baseURL: API_BASE_URL,
+              timeout: REQUEST_TIMEOUT,
+              headers: {
+                'Content-Type': 'application/json;charset=UTF-8',
+              },
+            });
+
+            // 请求拦截器
+            http.interceptors.request.use(
+              (config) => {
+                config.headers = config.headers || {};
+                // 从本地存储获取token
+                const token = localStorage.getItem('APP_TOKEN');
+                // 如果存在token，则添加到请求头
+                if (token) {
+                  config.headers = config.headers || {};
+                  config.headers['x-token'] = token;
+                }
+                return config;
+              },
+              (error) => {
+                // 请求错误处理
+                console.error('请求配置错误:', error);
+                return Promise.reject(error);
+              }
+            );
+
+            // 响应拦截器
+            http.interceptors.response.use(
+              (response) => {
+                const data = response.data;
+
+                // 检查是否为业务错误
+                if (isBusinessError(data)) {
+                  const businessError = formatBusinessError(data);
+                  // globalErrorHandler(businessError);
+                  return Promise.reject(businessError);
+                }
+
+                // 直接返回响应数据
+                return data.data;
+              },
+              (error: AxiosError) => {
+                // 处理HTTP错误
+                const apiError = handleAxiosError(error);
+                // globalErrorHandler(apiError);
+                return Promise.reject(apiError);
+              }
+            );
+
+            // 导出http实例
+            export default http;
+
+            // 导出常用的请求方法
+            export const request = {
+              // 使用类型断言来匹配响应拦截器实际返回的data.data
+              get: <T = unknown>(url: string, config?: AxiosRequestConfig) => http.get<HttpResponse<T>>(url, config) as unknown as Promise<T>,
+              post: <T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig) => http.post<HttpResponse<T>>(url, data, config) as unknown as Promise<T>,
+              // 导出axios引用，用于取消请求等高级功能
+              axios: axios
+            };
+
+          `
+        },
+        {
+          path: 'src/utils/errorHandler.ts',
+          content: `
+            // 错误处理工具
+            import type { AxiosError } from 'axios';
+            import { errorMessageMap } from './axiosConfig';
+
+            // 错误类型接口
+            export interface ApiError extends Error {
+              code?: number;
+              msg?: string;
+              data?: unknown;
+            }
+
+            /**
+             * 创建API错误对象
+             * @param message 错误消息
+             * @param status 状态码
+             * @param code 错误代码
+             * @param data 错误数据
+             * @returns ApiError对象
+             */
+            export function createApiError<T>(message: string, code?: number, data?: T): ApiError {
+              const error = new Error(message) as ApiError;
+              error.msg = message;
+              error.code = code;
+              error.data = data;
+              return error;
+            }
+
+            /**
+             * 处理axios错误
+             * @param error axios错误对象
+             * @returns 标准化的ApiError
+             */
+            export function handleAxiosError<T>(error: AxiosError): ApiError {
+              // 网络错误
+              if (!error.response) {
+                return createApiError('网络错误，请检查您的网络连接', -1);
+              }
+
+              const { response } = error;
+              const status = response.status;
+
+              // 从响应数据中提取错误信息
+              const responseData = response.data;
+              // 安全地访问响应数据
+              const data = responseData as Record<string, T>;
+              const errorMessage = data?.msg as string ||
+                errorMessageMap[status] ||
+                \`请求失败，状态码: ${status}\`;
+
+              const errorCode = data?.code as number || status;
+
+              return createApiError(errorMessage, errorCode, responseData);
+            }
+
+            /**
+             * 处理业务错误
+             * @param data 响应数据
+             * @returns 是否为业务错误
+             */
+            export function isBusinessError(data: unknown): boolean {
+              // 这里根据后端返回的业务错误格式进行判断
+              return data != null && typeof data === 'object' && 'code' in data && data.code !== 0;
+            }
+
+            /**
+             * 格式化业务错误
+             * @param data 响应数据
+             * @returns ApiError对象
+             */
+            export function formatBusinessError<T>(data: T): ApiError {
+              const businessData = data as Record<string, T>;
+              return createApiError(
+                (businessData?.msg as string) || '业务处理失败',
+                (businessData?.code as number) || 400,
+                data
+              );
+            }
+
+            /**
+             * 全局错误处理器
+             * 可以在这里添加错误日志记录、上报等功能
+             * @param error 错误对象
+             */
+            export function globalErrorHandler(error: Error | ApiError): void {
+              console.error('Global Error:', error);
+
+              // 可以在这里添加错误上报逻辑
+              // 例如：上报到Sentry等错误监控服务
+              // reportErrorToSentry(error);
+
+              // 根据错误类型进行不同处理
+              // if ('code' in error && error.code === 401) {
+              //   // 处理未授权错误，如跳转到登录页
+              //   handleUnauthorizedError();
+              // }
+            }
+
+            /**
+             * 处理未授权错误
+             */
+            // function handleUnauthorizedError(): void {
+            //   // 清除本地存储的token
+            //   localStorage.removeItem('token');
+
+            //   // 可以在这里添加跳转到登录页的逻辑
+            //   // 注意：由于这是工具函数，避免直接操作Vue Router
+            //   // 实际使用时，应该在组件或业务逻辑中处理跳转
+            //   console.warn('用户未授权，请重新登录');
+            // }
+
+          `
+        },
+        {
+          path: 'src/utils/imageUtils.ts',
+          content: `
+            // 图片地址处理工具函数
+
+            // 导出默认的图片基础URL配置（可以从环境变量读取）
+            export const DEFAULT_IMAGE_BASE_URL = import.meta.env.VITE_IMAGE_BASE_URL || '';
+
+            /**
+             * 图片地址拼接函数
+             * @param baseUrl 基础图片域名或路径
+             * @param imagePath 图片相对路径
+             * @returns 完整的图片URL
+             */
+            export const joinImageUrl = (imagePath: string, baseUrl?: string): string => {
+              // 处理空值情况
+              if (!imagePath) return '';
+
+              // 如果imagePath已经是完整的URL（包含http或https），直接返回
+              if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
+                return imagePath;
+              }
+
+              // 如果baseUrl未提供，使用默认值
+              const newBaseUrl = baseUrl || DEFAULT_IMAGE_BASE_URL;
+
+              // 处理baseUrl结尾的斜杠和imagePath开头的斜杠，避免重复
+              const normalizedBaseUrl = newBaseUrl.endsWith('/') ? newBaseUrl.slice(0, -1) : newBaseUrl;
+              let normalizedImagePath = imagePath.startsWith('/') ? imagePath.slice(1) : imagePath;
+              // 判断链接开头是否包含 '/api'前缀，包含则删除
+              if (normalizedImagePath.startsWith('api/')) {
+                normalizedImagePath = normalizedImagePath.slice(4);
+              }
+              // 拼接完整URL
+              return \`${normalizedBaseUrl}/${normalizedImagePath}\`;
+            };
+
+            /**
+             * 批量拼接图片URL
+             * @param baseUrl 基础图片域名或路径
+             * @param imagePaths 图片相对路径数组
+             * @returns 完整图片URL数组
+             */
+            export const joinImageUrls = (imagePaths: string[], baseUrl?: string): string[] => {
+              return imagePaths.map(path => joinImageUrl(path, baseUrl));
+            };
+
+            /**
+             * Vue组件：图片URL拼接工具
+             * 可以在模板中直接使用
+             */
+            export const useImageUrl = () => {
+
+              return {
+                // 单个图片URL拼接
+                getImageUrl: (imagePath: string, customBaseUrl?: string) => {
+                  return joinImageUrl(imagePath, customBaseUrl);
+                },
+
+                // 批量图片URL拼接
+                getImageUrls: (imagePaths: string[], customBaseUrl?: string) => {
+                  return joinImageUrls(imagePaths, customBaseUrl);
+                }
+              };
+            };
+          `
+        },
+        {
+          path: 'src/utils/README.md',
+          content: `
+            # Axios 二次封装说明
+
+            ## 项目结构
+
+            \`\`\`
+            /src/utils/
+            ├── axiosConfig.ts      # axios 配置文件
+            ├── axiosInstance.ts    # axios 实例封装
+            ├── errorHandler.ts     # 错误处理工具
+            ├── axiosExample.ts     # 使用示例
+            └── README.md           # 说明文档
+
+            /src/api/
+            ├── index.ts            # API管理入口
+            ├── userApi.ts          # 用户相关API
+            └── commonApi.ts        # 通用API
+            \`\`\`
+
+            ## 功能特性
+
+            1. **统一配置管理**：通过\`axiosConfig.ts\`集中管理API基础URL、超时时间等配置
+            2. **请求拦截器**：自动添加token认证、时间戳防缓存
+            3. **响应拦截器**：统一处理响应数据格式和错误
+            4. **错误处理机制**：HTTP错误、业务错误统一处理，支持错误日志上报
+            5. **API模块化管理**：按业务模块划分API接口，方便维护
+            6. **TypeScript支持**：完整的类型定义，提供良好的开发体验
+            7. **文件上传支持**：简化文件上传操作
+            8. **取消请求支持**：支持取消正在进行的请求
+
+            ## 安装和配置
+
+            项目已安装axios依赖，如需手动安装：
+
+            \`\`\`bash
+            pnpm install axios
+            \`\`\`
+
+            ### 环境变量配置
+
+            在项目根目录创建`.env`文件，配置API基础URL：
+
+            \`\`\`
+            VITE_API_BASE_URL=https://your-api-domain.com/api
+            \`\`\`
+
+            ## 使用方法
+
+            ### 1. 导入方式
+
+            \`\`\`typescript
+            // 方式1：导入API模块（推荐）
+            import { api } from '@/api';
+
+            // 方式2：直接使用request工具函数
+            import { request } from '@/api';
+
+            // 方式3：导入原始axios实例
+            import { http } from '@/api';
+            \`\`\`
+
+            ### 2. 基本使用示例
+
+            #### 用户登录
+
+            \`\`\`typescript
+            async function login() {
+              try {
+                const result = await api.user.login({
+                  username: 'admin',
+                  password: '123456'
+                });
+                
+                // 保存token
+                localStorage.setItem('token', result.token);
+                console.log('登录成功');
+              } catch (error) {
+                console.error('登录失败:', error.message);
+              }
+            }
+            \`\`\`
+
+            #### 获取用户信息
+
+            \`\`\`typescript
+            async function getUserInfo() {
+              try {
+                const userInfo = await api.user.getUserInfo();
+                console.log('用户信息:', userInfo);
+              } catch (error) {
+                console.error('获取用户信息失败:', error);
+              }
+            }
+            \`\`\`
+
+            #### 通用请求方法
+
+            \`\`\`typescript
+            // GET请求
+            const data = await request.get('/api/data', {
+              params: { id: 123 },
+              timeout: 5000
+            });
+
+            // POST请求
+            const result = await request.post('/api/data', {
+              name: 'test',
+              value: 'example'
+            });
+
+            // PUT请求
+            await request.put('/api/data/123', { name: 'updated' });
+
+            // DELETE请求
+            await request.delete('/api/data/123');
+            \`\`\`
+
+            ### 3. 文件上传示例
+
+            \`\`\`typescript
+            async function uploadAvatar(file: File) {
+              try {
+                const result = await api.common.uploadFile(file, 'image');
+                console.log('上传成功，文件URL:', result.url);
+                return result.url;
+              } catch (error) {
+                console.error('上传失败:', error);
+                return null;
+              }
+            }
+            \`\`\`
+
+            ### 4. 错误处理
+
+            \`\`\`typescript
+            import { api, ApiError } from '@/api';
+
+            async function handleRequest() {
+              try {
+                await api.user.getUserInfo();
+              } catch (error) {
+                if (error instanceof ApiError) {
+                  // 根据错误状态码处理
+                  if (error.status === 401) {
+                    // 未授权，跳转到登录页
+                    console.log('请重新登录');
+                  } else if (error.status === 403) {
+                    console.log('没有权限访问');
+                  } else {
+                    console.log('其他错误:', error.message);
+                  }
+                  
+                  // 根据错误代码处理
+                  if (error.code === 'USER_NOT_FOUND') {
+                    console.log('用户不存在');
+                  }
+                }
+              }
+            }
+            \`\`\`
+
+            ### 5. 并发请求
+
+            \`\`\`typescript
+            async function fetchMultipleData() {
+              try {
+                const [userInfo, systemStatus] = await Promise.all([
+                  api.user.getUserInfo(),
+                  api.common.getSystemStatus()
+                ]);
+                
+                console.log('用户信息:', userInfo);
+                console.log('系统状态:', systemStatus);
+              } catch (error) {
+                console.error('请求失败:', error);
+              }
+            }
+            \`\`\`
+
+            ### 6. 取消请求
+
+            \`\`\`typescript
+            import { request } from '@/api';
+
+            // 创建取消令牌
+            const CancelToken = request.axios.CancelToken;
+            const source = CancelToken.source();
+
+            // 发送请求
+            request.get('/api/long-running', {
+              cancelToken: source.token
+            });
+
+            // 取消请求
+            function cancelRequest() {
+              source.cancel('用户取消了请求');
+            }
+            \`\`\`
+
+            ## Vue 3组件中使用示例
+
+            \`\`\`vue
+            <script setup lang="ts">
+            import { ref, onMounted } from 'vue';
+            import { api } from '@/api';
+
+            const loading = ref(false);
+            const userList = ref([]);
+            const errorMsg = ref('');
+
+            const fetchUsers = async (page = 1) => {
+              loading.value = true;
+              errorMsg.value = '';
+              
+              try {
+                const result = await api.user.getUserList({ page, pageSize: 10 });
+                userList.value = result.list;
+              } catch (error) {
+                errorMsg.value = error.message || '获取用户列表失败';
+              } finally {
+                loading.value = false;
+              }
+            };
+
+            onMounted(() => {
+              fetchUsers();
+            });
+            </script>
+
+            <template>
+              <div class="user-list">
+                <div v-if="loading">加载中...</div>
+                <div v-else-if="errorMsg" class="error">{{ errorMsg }}</div>
+                <div v-else>
+                  <div v-for="user in userList" :key="user.id" class="user-item">
+                    {{ user.name }} - {{ user.email }}
+                  </div>
+                </div>
+              </div>
+            </template>
+            \`\`\`
+
+            ## 扩展说明
+
+            ### 1. 添加新的API模块
+
+            1. 在\`/src/api/\`目录下创建新的API文件，例如\`productApi.ts\`
+            2. 在文件中定义API接口和相关类型
+            3. 在`/ src / api / index.ts`中导入并导出新模块
+
+            ### 2. 自定义配置
+
+            可以在\`axiosConfig.ts\`中修改配置：
+            - \`API_BASE_URL\`：修改API基础URL
+            - \`REQUEST_TIMEOUT\`：调整请求超时时间
+            - \`errorMessageMap\`：自定义错误消息 （可选）
+
+            ### 3. 全局错误处理
+
+            可以在\`errorHandler.ts\`的\`globalErrorHandler\`函数中添加：
+            - 错误日志上报
+            - 统一错误提示
+            - 根据错误类型执行不同操作
+
+            ## 注意事项
+
+            1. 所有API调用都应该使用\`try/catch\`进行错误处理
+            2. 登录成功后，token会自动保存到localStorage，并在后续请求中自动添加
+            3. 未授权错误(401)会自动清除token，可以在组件中监听此错误进行页面跳转
+            4. 文件上传时，需要使用FormData格式
+            5. 对于大型项目，可以根据业务模块创建更多API文件
+
+            **************************************************
+            # 工具函数库
+
+            ## 图片地址处理工具
+
+            ### 主要功能
+            - 拼接图片基础URL和相对路径
+            - 智能处理URL中的斜杠，避免重复
+            - 识别并保留完整URL（以http或https开头的路径）
+            - 支持批量图片URL处理
+            - 提供Vue组件和组合式API使用方式
+
+            ### 使用方法
+
+            #### 1. 直接使用工具函数
+
+            \`\`\`typescript
+            import { joinImageUrl, joinImageUrls } from '@/utils/imageUtils';
+
+            // 单个图片URL拼接
+            const imageUrl = joinImageUrl('https://cdn.example.com', 'images/product.jpg');
+            // 结果: https://cdn.example.com/images/product.jpg
+
+            // 批量图片URL拼接
+            const imageUrls = joinImageUrls([
+              'images/1.jpg',
+              'images/2.jpg'
+            ], 'https://cdn.example.com');
+            \`\`\`
+
+            #### 2. 使用组合式API（在Vue组件中）
+
+            \`\`\`typescript
+            import { useImageUrl } from '@/utils/imageUtils';
+
+            // 创建自定义基础URL的图片工具
+            const imageTools = useImageUrl('https://cdn.example.com');
+
+            // 单个图片URL
+            const imageUrl = imageTools.getImageUrl('images/product.jpg');
+
+            // 或使用自定义基础URL覆盖默认值
+            const imageUrlWithCustomBase = imageTools.getImageUrl('images/product.jpg', 'https://custom.example.com');
+            \`\`\`
+
+            #### 3. 使用Vue组件
+
+            \`\`\`vue
+            <template>
+              <!-- 简单使用 -->
+              <ImageUrl path="images/product.jpg" />
+              
+              <!-- 使用自定义基础URL -->
+              <ImageUrl path="images/product.jpg" base-url="https://cdn.example.com" />
+              
+              <!-- 使用插槽自定义渲染 -->
+              <ImageUrl path="images/product.jpg" #default="{ url }">
+                <img :src="url" alt="产品图片" />
+              </ImageUrl>
+            </template>
+
+            \`\`\`
+
+            ### 配置说明
+
+            可以在环境变量文件（.env）中配置默认图片基础URL：
+
+            \`\`\`
+            VITE_IMAGE_BASE_URL=https://cdn.example.com
+            \`\`\`
+
+            如果未配置，默认值为'/'（网站根目录）。
+
+            ### 注意事项
+            - 工具会自动处理URL中的斜杠，避免重复
+            - 如果提供的图片路径已经是完整URL，将直接返回该URL
+            - 对于空路径，函数会返回空字符串，避免生成无效URL
+          `
+        },
+        {
+          path: 'src/api/index.ts',
+          content: `
+            // API接口管理入口文件
+
+            // 导出各个模块的API
+            import * as yApi from './app/yApi';
+
+            // 统一导出所有API
+            export {
+              yApi,
+            };
+
+            // 导出axios实例和请求方法，便于直接使用
+            import http, { request } from '../utils/axiosInstance';
+            export { http, request };
+
+            // 导出错误处理相关工具
+            export * from '../utils/errorHandler';
+
+          `
+        },
+      ]
+    }
+  }
+];
+
+// 读取配置文件
+function getConfig() {
+  const configPath = path.join(process.cwd(), 'create-my-vue.config.js');
+  if (fs.existsSync(configPath)) {
+    return require(configPath);
+  }
+  return {};
+}
+
+// 解析配置为命令行参数
+function parseConfigToArgs(config) {
+  const args = [];
+
+  // 转换配置为 pnpm create vue@latest 的命令行参数格式
+  if (config.projectName) {
+    args.push(config.projectName);
+  }
+
+  // 添加 --default 或具体选项
+  if (config.default) {
+    args.push('--default');
+  } else {
+    // 处理具体选项
+    if (config.typescript !== undefined) {
+      args.push(config.typescript ? '--typescript' : '--no-typescript');
+    }
+    if (config.jsx !== undefined) {
+      args.push(config.jsx ? '--jsx' : '--no-jsx');
+    }
+    if (config.router !== undefined) {
+      args.push(config.router ? '--router' : '--no-router');
+    }
+    if (config.pinia !== undefined) {
+      args.push(config.pinia ? '--pinia' : '--no-pinia');
+    }
+    if (config.vitest !== undefined) {
+      args.push(config.vitest ? '--vitest' : '--no-vitest');
+    }
+    if (config.cypress !== undefined) {
+      args.push(config.cypress ? '--cypress' : '--no-cypress');
+    }
+    if (config.eslint !== undefined) {
+      args.push(config.eslint ? '--eslint' : '--no-eslint');
+    }
+    if (config.prettier !== undefined) {
+      args.push(config.prettier ? '--prettier' : '--no-prettier');
+    }
+  }
+
+  return args;
+}
+
+// 执行命令并返回Promise
+function executeCommand(command, args, options = {}) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      stdio: 'inherit',
+      shell: true,
+      ...options
+    });
+
+    child.on('error', (error) => {
+      reject(error);
+    });
+
+    child.on('close', (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Command failed with exit code ${code}`));
+      }
+    });
+  });
+}
+
+// 修改项目配置文件
+function updateProjectConfig(projectPath, selectedPlugins) {
+  // 1. 处理vite.config.js
+  const viteConfigPath = path.join(projectPath, 'vite.config.js');
+  if (fs.existsSync(viteConfigPath)) {
+    let content = fs.readFileSync(viteConfigPath, 'utf8');
+
+    // 收集所有需要添加的导入和插件
+    const allImports = [];
+    const allPlugins = [];
+
+    selectedPlugins.forEach(pluginName => {
+      const plugin = plugins.find(p => p.name === pluginName);
+      if (plugin && plugin.config.vite) {
+        allImports.push(...plugin.config.vite.imports);
+        allPlugins.push(...plugin.config.vite.plugins);
+      }
+    });
+
+    // 添加导入语句
+    if (allImports.length > 0) {
+      const importStatements = allImports.join('\n');
+      content = content.replace(/import\s+\w+\s+from/g, match => `${importStatements}\n${match}`);
+    }
+
+    // 添加插件配置
+    if (allPlugins.length > 0) {
+      const pluginStatements = allPlugins.join(',\n  ');
+      content = content.replace(/plugins:\s*\[([\s\S]*?)\]/g, (match, existingPlugins) => {
+        if (existingPlugins.trim()) {
+          return `plugins: [
+  ${existingPlugins.trim()},
+  ${pluginStatements}
+]`;
+        } else {
+          return `plugins: [
+  ${pluginStatements}
+]`;
+        }
+      });
+    }
+
+    fs.writeFileSync(viteConfigPath, content, 'utf8');
+    console.log('成功更新 vite.config.js');
+  } else {
+    console.log('未找到 vite.config.js，跳过...');
+  }
+
+  // 2. 处理插件配置的文件
+  selectedPlugins.forEach(pluginName => {
+    const plugin = plugins.find(p => p.name === pluginName);
+    if (plugin && plugin.config.files) {
+      plugin.config.files.forEach(fileConfig => {
+        const filePath = path.join(projectPath, fileConfig.path);
+
+        // 确保目录存在
+        const dirPath = path.dirname(filePath);
+        if (!fs.existsSync(dirPath)) {
+          fs.mkdirSync(dirPath, { recursive: true });
+        }
+
+        if (fileConfig.append && fs.existsSync(filePath)) {
+          // 追加内容
+          const existingContent = fs.readFileSync(filePath, 'utf8');
+          fs.writeFileSync(filePath, existingContent + fileConfig.content, 'utf8');
+          console.log(`成功追加到 ${fileConfig.path}`);
+        } else {
+          // 创建或覆盖文件
+          fs.writeFileSync(filePath, fileConfig.content, 'utf8');
+          console.log(`成功创建 ${fileConfig.path}`);
+        }
+      });
+    }
+  });
+}
+
+// 主流程
+async function main(projectName, options) {
+  // 获取配置文件
+  const config = getConfig();
+
+  // 合并命令行参数和配置文件
+  const finalConfig = {
+    projectName: projectName || config.projectName,
+    ...config,
+    ...options
+  };
+
+  // 构建 pnpm create vue@latest 命令
+  const args = ['create', 'vue@latest', ...parseConfigToArgs(finalConfig)];
+
+  console.log(`Running: pnpm ${args.join(' ')}`);
+
+  // 如果是 dry-run，只显示命令不执行
+  if (finalConfig.dryRun) {
+    console.log('Dry run 完成。未创建实际项目。');
+    process.exit(0);
+  }
+
+  // 执行创建命令
+  try {
+    await executeCommand('pnpm', args);
+
+    // 问询用户是否添加额外插件
+    const projectPath = path.join(process.cwd(), finalConfig.projectName);
+
+    if (fs.existsSync(projectPath)) {
+      console.log('\n项目创建成功！');
+
+      // 创建 composables 和 utils 文件夹
+      const composablesPath = path.join(projectPath, 'src/composables');
+      const utilsPath = path.join(projectPath, 'src/utils');
+      const iconPath = path.join(projectPath, 'src/assets/icons');
+      const apiPath = path.join(projectPath, 'src/api');
+
+      if (!fs.existsSync(composablesPath)) {
+        fs.mkdirSync(composablesPath, { recursive: true });
+        console.log(`成功创建 ${composablesPath}`);
+      }
+
+      if (!fs.existsSync(utilsPath)) {
+        fs.mkdirSync(utilsPath, { recursive: true });
+        console.log(`成功创建 ${utilsPath}`);
+      }
+
+      if (!fs.existsSync(iconPath)) {
+        fs.mkdirSync(iconPath, { recursive: true });
+        console.log(`成功创建 ${iconPath}`);
+      }
+
+      if (!fs.existsSync(apiPath)) {
+        fs.mkdirSync(apiPath, { recursive: true });
+        console.log(`成功创建 ${apiPath}`);
+      }
+
+      const { selectedPlugins } = await inquirer.prompt([
+        {
+          type: 'checkbox',
+          name: 'selectedPlugins',
+          message: '您想要添加哪些额外的插件？',
+          choices: plugins.map(plugin => ({
+            name: `${plugin.name} - ${plugin.description}`,
+            value: plugin.name
+          }))
+        }
+      ]);
+
+      if (selectedPlugins.length > 0) {
+        console.log('\n正在安装选定的插件...');
+
+        // 收集所有依赖
+        const allDependencies = [];
+        selectedPlugins.forEach(pluginName => {
+          const plugin = plugins.find(p => p.name === pluginName);
+          if (plugin) {
+            allDependencies.push(...plugin.dependencies);
+          }
+        });
+
+        // 安装依赖
+        await executeCommand('pnpm', ['install', '--save-dev', ...allDependencies], {
+          cwd: projectPath
+        });
+
+        // 更新项目配置
+        updateProjectConfig(projectPath, selectedPlugins);
+
+        console.log('\n所有插件安装和配置成功！');
+      }
+    }
+  } catch (error) {
+    console.error(`Error: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+program
+  .name('create-my-vue')
+  .description('pnpm create vue@latest 的二次封装，支持自定义默认选项')
+  .version('1.0.0')
+  .argument('[project-name]', '要创建的项目名称')
+  .option('-d, --default', '使用默认选项')
+  .option('--dry-run', '显示将要执行的命令，但不实际运行')
+  .option('--typescript', '添加 TypeScript')
+  .option('--no-typescript', '不添加 TypeScript')
+  .option('--jsx', '添加 JSX 支持')
+  .option('--no-jsx', '不添加 JSX 支持')
+  .option('--router', '添加 Vue Router')
+  .option('--no-router', '不添加 Vue Router')
+  .option('--pinia', '添加 Pinia')
+  .option('--no-pinia', '不添加 Pinia')
+  .option('--vitest', '添加 Vitest 用于单元测试')
+  .option('--no-vitest', '不添加 Vitest 用于单元测试')
+  .option('--cypress', '添加 Cypress 用于端到端测试')
+  .option('--no-cypress', '不添加 Cypress 用于端到端测试')
+  .option('--eslint', '添加 ESLint 用于代码质量')
+  .option('--no-eslint', '不添加 ESLint 用于代码质量')
+  .option('--prettier', '添加 Prettier 用于代码格式化')
+  .option('--no-prettier', '不添加 Prettier 用于代码格式化')
+  .action((projectName, options) => {
+    main(projectName, options);
+  });
+
+program.parse(process.argv);

package/create-my-vue.config.example.js

@@ -0,0 +1,20 @@
+// create-my-vue.config.js 示例配置文件
+// 复制此文件并重命名为 create-my-vue.config.js 以使用自定义配置
+
+module.exports = {
+  // 项目名称
+  // projectName: 'my-vue-project',
+  
+  // 使用默认配置（等同于 --default）
+  // default: true,
+  
+  // 具体选项配置
+  typescript: true,     // 添加 TypeScript
+  jsx: true,            // 添加 JSX 支持
+  router: true,         // 添加 Vue Router
+  pinia: true,          // 添加 Pinia
+  vitest: true,         // 添加 Vitest 用于单元测试
+  cypress: false,       // 不添加 Cypress 用于端到端测试
+  eslint: true,         // 添加 ESLint 用于代码质量
+  prettier: true        // 添加 Prettier 用于代码格式化
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@aibai/create-myvue",
+  "version": "0.0.1",
+  "description": "pnpm create vue@latest 的二次封装，支持自定义默认选项",
+  "main": "index.js",
+  "bin": {
+    "create-my-vue": "./bin/cli.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "vue",
+    "cli",
+    "create-vue"
+  ],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "commander": "^12.1.0",
+    "inquirer": "^13.2.1"
+  }
+}