vue-standard-wanfu 2.0.0

package/template/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "hello-world-vue",
+	"version": "1.0.0",
+	"type": "module",
+	"packageManager": "pnpm@10.x",
+	"engines": {
+		"node": ">=24"
+	},
+	"scripts": {
+		"dev": "vite",
+		"build": "vue-tsc --noEmit && vite build",
+		"typecheck": "vue-tsc --noEmit",
+		"lint": "eslint .",
+		"format": "prettier . --write",
+		"test": "vitest",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"vue": "^3.5.0",
+		"vue-router": "^4.5.0",
+		"pinia": "^2.3.0"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-vue": "^5.2.0",
+		"typescript": "^5.7.0",
+		"vite": "^6.0.0",
+		"vue-tsc": "^2.2.0",
+		"eslint": "^9.20.0",
+		"prettier": "^3.5.0",
+		"@eslint/js": "^9.20.0",
+		"typescript-eslint": "^8.24.0",
+		"eslint-plugin-vue": "^9.32.0",
+		"vitest": "^3.0.0"
+	}
+}

package/template/src/app/App.vue

@@ -0,0 +1,16 @@
+<template>
+	<div id="app">
+		<router-view />
+	</div>
+</template>
+
+<script setup lang="ts">
+// 应用根组件
+</script>
+
+<style scoped>
+#app {
+	width: 100%;
+	height: 100vh;
+}
+</style>

package/template/src/components/HelloWorld.vue

@@ -0,0 +1,82 @@
+<template>
+	<div class="hello-world" @click="handleClick">
+		<h1>{{ message }}</h1>
+		<p class="subtitle">这是一个符合前端开发规范的 Vue 3 项目</p>
+		<div class="features">
+			<span class="feature-tag">TypeScript</span>
+			<span class="feature-tag">Vite</span>
+			<span class="feature-tag">Pinia</span>
+			<span class="feature-tag">Vue Router</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+// #region Props 定义
+type Props = {
+	message: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	message: 'Hello World',
+});
+// #endregion
+
+// #region Emits 定义
+const emit = defineEmits<{
+	click: [];
+}>();
+// #endregion
+
+// #region 事件处理
+/**
+ * 处理点击事件，向父组件发送 click 事件
+ */
+const handleClick = () => {
+	emit('click');
+};
+// #endregion
+</script>
+
+<style scoped>
+.hello-world {
+	padding: 40px;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	border-radius: 12px;
+	color: white;
+	cursor: pointer;
+	transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.hello-world:hover {
+	transform: translateY(-5px);
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.hello-world h1 {
+	font-size: 48px;
+	margin: 0 0 20px 0;
+	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.subtitle {
+	font-size: 18px;
+	margin: 0 0 30px 0;
+	opacity: 0.9;
+}
+
+.features {
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+.feature-tag {
+	padding: 8px 16px;
+	background-color: rgba(255, 255, 255, 0.2);
+	border-radius: 20px;
+	font-size: 14px;
+	backdrop-filter: blur(10px);
+}
+</style>

package/template/src/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import router from './router';
+import App from './app/App.vue';
+import './styles/main.css';
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+
+app.mount('#app');

package/template/src/pages/index.vue

@@ -0,0 +1,136 @@
+<template>
+	<div class="hello-world-container">
+		<HelloWorld :message="welcomeMessage" @click="handleClick" />
+		
+		<div class="info-section">
+			<h2>项目信息</h2>
+			<ul>
+				<li>Vue 版本: {{ vueVersion }}</li>
+				<li>TypeScript: 已启用</li>
+				<li>构建工具: Vite</li>
+				<li>状态管理: Pinia</li>
+				<li>路由: Vue Router</li>
+			</ul>
+		</div>
+
+		<div class="counter-section">
+			<p>计数器: {{ count }}</p>
+			<button @click="increment" :disabled="isLoading">增加</button>
+			<button @click="decrement" :disabled="isLoading">减少</button>
+			<button @click="reset" :disabled="isLoading">重置</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import HelloWorld from '@/components/HelloWorld.vue';
+
+// #region 响应式状态
+const count = ref(0);
+const isLoading = ref(false);
+// #endregion
+
+// #region 计算属性
+const welcomeMessage = computed(() => `欢迎使用 Vue 3 Hello World`);
+const vueVersion = computed(() => '3.5+');
+// #endregion
+
+// #region 事件处理
+/**
+ * 处理点击事件
+ */
+const handleClick = () => {
+	console.log('HelloWorld 组件被点击');
+};
+
+/**
+ * 增加计数
+ */
+const increment = () => {
+	count.value++;
+};
+
+/**
+ * 减少计数
+ */
+const decrement = () => {
+	if (count.value > 0) {
+		count.value--;
+	}
+};
+
+/**
+ * 重置计数
+ */
+const reset = () => {
+	count.value = 0;
+};
+// #endregion
+</script>
+
+<style scoped>
+.hello-world-container {
+	max-width: 800px;
+	margin: 0 auto;
+	padding: 40px 20px;
+	text-align: center;
+}
+
+.info-section {
+	margin: 40px 0;
+	padding: 20px;
+	background-color: #f5f5f5;
+	border-radius: 8px;
+}
+
+.info-section h2 {
+	color: #42b983;
+	margin-bottom: 20px;
+}
+
+.info-section ul {
+	list-style: none;
+	padding: 0;
+}
+
+.info-section li {
+	padding: 8px 0;
+	font-size: 16px;
+	color: #333;
+}
+
+.counter-section {
+	margin-top: 40px;
+	padding: 20px;
+	border: 2px solid #42b983;
+	border-radius: 8px;
+}
+
+.counter-section p {
+	font-size: 24px;
+	margin-bottom: 20px;
+	color: #42b983;
+}
+
+.counter-section button {
+	margin: 0 10px;
+	padding: 10px 20px;
+	font-size: 16px;
+	border: none;
+	border-radius: 4px;
+	background-color: #42b983;
+	color: white;
+	cursor: pointer;
+	transition: background-color 0.3s;
+}
+
+.counter-section button:hover:not(:disabled) {
+	background-color: #369970;
+}
+
+.counter-section button:disabled {
+	background-color: #ccc;
+	cursor: not-allowed;
+}
+</style>

package/template/src/router/index.ts

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+	{
+		path: '/',
+		name: 'Home',
+		component: () => import('@/pages/index.vue'),
+	},
+];
+
+const router = createRouter({
+	history: createWebHistory(),
+	routes,
+});
+
+export default router;

package/template/src/styles/main.css

@@ -0,0 +1,32 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		'Open Sans', 'Helvetica Neue', sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	background-color: #f9f9f9;
+	color: #333;
+}
+
+#app {
+	width: 100%;
+	min-height: 100vh;
+}
+
+a {
+	color: #42b983;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+button {
+	font-family: inherit;
+}

package/template/src/types/index.ts

@@ -0,0 +1,25 @@
+/**
+ * 全局类型定义
+ */
+
+// API 响应基础类型
+export interface ApiResponse<T = any> {
+	code: number;
+	message: string;
+	data: T;
+}
+
+// 用户信息类型
+export interface UserInfo {
+	id: string;
+	name: string;
+	email?: string;
+	avatar?: string;
+}
+
+// 分页参数
+export interface PaginationParams {
+	page: number;
+	pageSize: number;
+	total?: number;
+}

package/template/tsconfig.json

@@ -0,0 +1,33 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "preserve",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedIndexedAccess": false,
+		"noImplicitOverride": true,
+
+		/* Path alias */
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["src/*"]
+		}
+	},
+	"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+	"references": [{ "path": "./tsconfig.node.json" }]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true,
+		"strict": true
+	},
+	"include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [vue()],
+	resolve: {
+		alias: {
+			'@': resolve(__dirname, 'src'),
+		},
+	},
+	server: {
+		port: 3000,
+		open: true,
+	},
+});