vue-standard-wanfu 2.0.0

package/README.md

@@ -0,0 +1,106 @@
+# create-vue-standard
+
+基于前端开发规范的 Vue 3 项目脚手架工具，快速创建符合规范的标准项目。
+
+## 使用方法
+
+### 使用 npm
+
+```bash
+npm create vue-standard@latest
+```
+
+### 使用 pnpm（推荐）
+
+```bash
+pnpm create vue-standard
+```
+
+### 使用 yarn
+
+```bash
+yarn create vue-standard
+```
+
+### 直接指定项目名称
+
+```bash
+pnpm create vue-standard my-project
+```
+
+### 使用命令行参数
+
+```bash
+pnpm create vue-standard my-project --description "My Vue Project" --author "Your Name"
+```
+
+## 交互式创建流程
+
+运行命令后，会提示你输入：
+
+1. **项目名称** - 项目的文件夹名称
+2. **项目描述** - 项目的简短描述
+3. **作者名称** - 项目作者
+4. **是否初始化 Git** - 自动初始化 Git 仓库并提交
+
+## 创建的项目包含
+
+✅ Vue 3.5+  
+✅ TypeScript (strict 模式)  
+✅ Vite 8 构建工具  
+✅ Vue Router 4  
+✅ Pinia 状态管理  
+✅ ESLint + Prettier 代码规范  
+✅ 完整的项目结构  
+✅ 示例页面和组件  
+✅ 响应式设计  
+
+## 项目特性
+
+- 📋 **符合规范** - 严格遵循前端开发规范 v1.01
+- 🎯 **开箱即用** - 无需额外配置，立即开始开发
+- 🔧 **易于定制** - 清晰的目录结构，方便扩展
+- 🚀 **现代化** - 使用最新稳定版本的技术栈
+
+## 开发说明
+
+### 本地开发
+
+```bash
+# 克隆项目
+git clone <repository-url>
+cd create-vue-standard
+
+# 安装依赖
+pnpm install
+
+# 链接到全局（用于测试）
+pnpm link --global
+
+# 测试脚手架
+create-vue-standard test-project
+```
+
+### 发布到 npm
+
+```bash
+# 登录 npm
+npm login
+
+# 更新版本号
+npm version patch  # 或 minor, major
+
+# 发布
+npm publish
+```
+
+## 技术实现
+
+- **prompts** - 交互式命令行提示
+- **kolorist** - 终端彩色输出
+- **fs-extra** - 增强的文件系统操作
+- **minimist** - 命令行参数解析
+
+## License
+
+MIT

package/bin/cli.js

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+
+import prompts from 'prompts';
+import { red, green, blue, yellow } from 'kolorist';
+import minimist from 'minimist';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import { copyTemplate } from '../lib/copy.js';
+import { initGit } from '../lib/git.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// 解析命令行参数
+const argv = minimist(process.argv.slice(2));
+const targetDir = argv._[0];
+
+/**
+ * 主函数
+ */
+async function main() {
+	console.log(`\n${blue('✨')} ${green('欢迎使用 Vue 标准项目脚手架')}\n`);
+
+	let result;
+
+	try {
+		// 如果没有指定目录，交互式询问
+		if (!targetDir) {
+			result = await prompts(
+				[
+					{
+						type: 'text',
+						name: 'projectName',
+						message: '请输入项目名称：',
+						initial: 'vue-project',
+						validate: (value) => {
+							if (!value || value.trim() === '') {
+								return '项目名称不能为空';
+							}
+							return true;
+						},
+					},
+					{
+						type: 'text',
+						name: 'description',
+						message: '请输入项目描述：',
+						initial: 'A Vue 3 project',
+					},
+					{
+						type: 'text',
+						name: 'author',
+						message: '请输入作者名称：',
+						initial: '',
+					},
+				],
+				{
+					onCancel: () => {
+						console.log(yellow('\n👋 已取消创建\n'));
+						process.exit(0);
+					},
+				}
+			);
+		} else {
+			// 使用命令行参数
+			result = {
+				projectName: targetDir,
+				description: argv.description || 'A Vue 3 project',
+				author: argv.author || '',
+			};
+		}
+
+		const { projectName, description, author } = result;
+		const root = path.join(process.cwd(), projectName);
+
+		// 检查目录是否已存在
+		if (fs.existsSync(root)) {
+			const { overwrite } = await prompts({
+				type: 'confirm',
+				name: 'overwrite',
+				message: `目录 "${projectName}" 已存在，是否覆盖？`,
+				initial: false,
+			});
+
+			if (!overwrite) {
+				console.log(red('\n❌ 操作已取消\n'));
+				process.exit(0);
+			}
+
+			// 清空目录
+			fs.emptyDirSync(root);
+		}
+
+		console.log(`\n${blue('📦')} 正在创建项目...`);
+
+		// 复制模板文件
+		await copyTemplate(root, {
+			projectName,
+			description,
+			author,
+		});
+
+		// 初始化 git
+		const { useGit } = await prompts({
+			type: 'confirm',
+			name: 'useGit',
+			message: '是否初始化 Git 仓库？',
+			initial: true,
+		});
+
+		if (useGit) {
+			console.log(`${blue('🔧')} 初始化 Git 仓库...`);
+			initGit(root);
+		}
+
+		// 显示成功信息
+		console.log(`\n${green('✅')} 项目创建成功！\n`);
+		console.log(`${blue('📁')} 项目位置: ${root}\n`);
+		console.log(`${blue('🚀')} 开始使用:\n`);
+		console.log(`  ${yellow('cd')} ${projectName}`);
+		console.log(`  ${yellow('pnpm install')}`);
+		console.log(`  ${yellow('pnpm dev')}\n`);
+		console.log(`${blue('📖')} 更多信息请查看 README.md\n`);
+	} catch (error) {
+		console.error(red('\n❌ 项目创建失败:'), error.message);
+		process.exit(1);
+	}
+}
+
+main();

package/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "vue-standard-wanfu",
+	"version": "2.0.0",
+	"description": "基于前端开发规范的 Vue 3 项目脚手架",
+	"type": "module",
+	"bin": {
+		"create-vue-standard-wanfu": "./bin/cli.js"
+	},
+	"files": [
+		"bin",
+		"template"
+	],
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [
+		"vue",
+		"vue3",
+		"scaffold",
+		"template",
+		"typescript",
+		"vite"
+	],
+	"author": "",
+	"license": "MIT",
+	"dependencies": {
+		"prompts": "^2.4.2",
+		"kolorist": "^1.8.0",
+		"fs-extra": "^11.2.0",
+		"minimist": "^1.2.8"
+	},
+	"engines": {
+		"node": ">=16.0.0"
+	}
+}

package/template/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"semi": true,
+	"trailingComma": "es5",
+	"singleQuote": true,
+	"printWidth": 140,
+	"tabWidth": 2,
+	"useTabs": true,
+	"endOfLine": "lf"
+}

package/template/README.md

@@ -0,0 +1,133 @@
+# Hello World - Vue 3 项目
+
+这是一个符合《前端开发规范 v1.01》的 Vue 3 Hello World 示例项目。
+
+## 技术栈
+
+- **Vue 3.5+** - 渐进式 JavaScript 框架
+- **TypeScript** - 类型安全的 JavaScript 超集
+- **Vite 8** - 下一代前端构建工具
+- **Vue Router 4** - 官方路由管理器
+- **Pinia** - 直观的状态管理库
+- **ESLint + Prettier** - 代码质量和格式化工具
+
+## 项目结构
+
+```
+hello-world/
+├── src/
+│   ├── app/              # 应用启动、全局配置
+│   │   └── App.vue       # 根组件
+│   ├── components/       # 通用组件
+│   │   └── HelloWorld.vue
+│   ├── pages/            # 页面组件
+│   │   └── index.vue     # 首页
+│   ├── router/           # 路由配置
+│   │   └── index.ts
+│   ├── styles/           # 全局样式
+│   │   └── main.css
+│   ├── types/            # 类型定义
+│   │   └── index.ts
+│   └── main.ts           # 入口文件
+├── index.html            # HTML 模板
+├── package.json          # 项目依赖
+├── tsconfig.json         # TypeScript 配置
+├── vite.config.ts        # Vite 配置
+├── eslint.config.js      # ESLint 配置
+└── .prettierrc           # Prettier 配置
+```
+
+## 快速开始
+
+### 环境要求
+
+- Node.js >= 24 (LTS)
+- pnpm >= 10
+
+### 安装依赖
+
+```bash
+pnpm install
+```
+
+### 开发模式
+
+```bash
+pnpm dev
+```
+
+访问 http://localhost:3000
+
+### 构建生产版本
+
+```bash
+pnpm build
+```
+
+### 类型检查
+
+```bash
+pnpm typecheck
+```
+
+### 代码检查
+
+```bash
+pnpm lint
+```
+
+### 代码格式化
+
+```bash
+pnpm format
+```
+
+## 功能特性
+
+✅ TypeScript 严格模式  
+✅ Vue 3 Composition API  
+✅ 路由懒加载  
+✅ 组件化开发  
+✅ 响应式设计  
+✅ 代码规范和格式化  
+✅ 路径别名 (@/)  
+
+## 规范遵循
+
+本项目严格遵循以下规范：
+
+1. **组件命名**: PascalCase
+2. **文件命名**: kebab-case
+3. **TypeScript**: 启用 strict 模式
+4. **代码注释**: JSDoc + 禅道关联
+5. **区域折叠**: #region / #endregion
+6. **Props 和 Emits**: 完整类型声明
+7. **响应式状态**: ref/computed 合理使用
+
+## 示例说明
+
+### HelloWorld 组件
+
+- 接收 `message` prop
+- 触发 `click` 事件
+- 使用 `<script setup>` 语法
+- Props 和 Emits 类型完整
+
+### 首页 (index.vue)
+
+- 展示项目信息
+- 计数器功能演示
+- 响应式状态管理
+- 事件处理示例
+
+## 开发建议
+
+1. 新功能请在 `features/` 目录下按业务模块组织
+2. 通用组件放在 `components/` 目录
+3. 组合式函数统一使用 `useXxx` 命名
+4. API 请求封装在 `services/` 或 `lib/` 目录
+5. 提交代码前运行 lint 和 typecheck
+
+## License
+
+MIT

package/template/eslint.config.js

@@ -0,0 +1,30 @@
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import vuePlugin from 'eslint-plugin-vue';
+
+export default [
+	js.configs.recommended,
+	...tseslint.configs.recommended,
+	...vuePlugin.configs['flat/recommended'],
+	{
+		files: ['**/*.{js,mjs,cjs,ts,vue}'],
+		languageOptions: {
+			ecmaVersion: 2020,
+			sourceType: 'module',
+		},
+		rules: {
+			'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+			'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+			'@typescript-eslint/no-explicit-any': 'warn',
+			'vue/multi-word-component-names': 'off',
+		},
+	},
+	{
+		files: ['**/*.vue'],
+		languageOptions: {
+			parserOptions: {
+				parser: tseslint.parser,
+			},
+		},
+	},
+];

package/template/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Hello World - Vue 3</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>