common-vue-init - SKILL.md Agent Skill

name: "common-vue-init" description: "Vue 项目初始化技能"

Vue 项目初始化技能

功能描述

快速创建 Vue 项目结构，支持 Vue 3 + Vite + TypeScript 配置。

何时使用

创建新的 Vue 前端项目
快速搭建前端项目骨架
标准化前端项目结构

核心功能

生成 Vue 3 + Vite 项目结构
配置 TypeScript
集成 TailwindCSS
创建组件模板
配置 ESLint 和 Prettier

输入参数

参数	类型	必填	说明
projectName	String	是	项目名称
packageManager	String	否	包管理器（npm/yarn/pnpm，默认 npm）
withTypeScript	Boolean	否	是否使用 TypeScript（默认 true）
withTailwind	Boolean	否	是否集成 TailwindCSS（默认 true）
features	Array	否	额外功能（router/pinia/axios等）

输出格式

{
  "status": "SUCCESS",
  "projectName": "my-vue-app",
  "packageManager": "npm",
  "withTypeScript": true,
  "withTailwind": true,
  "filesCreated": [
    "package.json",
    "vite.config.ts",
    "tsconfig.json",
    "src/App.vue",
    "src/main.ts",
    "src/components/"
  ],
  "nextSteps": [
    "cd my-vue-app",
    "npm install",
    "npm run dev"
  ]
}

使用流程

指定项目名称
选择包管理器和语言
添加所需功能
生成项目结构

最佳实践

使用 pnpm 作为包管理器（更快、更节省空间）
集成 Pinia 进行状态管理
使用 Axios 进行 HTTP 请求

配置要求

vite.config.ts 示例

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

扩展指南

支持添加自定义模板和插件。