create-uniapps 1.0.0

package/README.md

@@ -0,0 +1,191 @@
+# 🌈 uni-preset-vue 模板说明文档
+
+一个基于 **Vue3 + TypeScript + Vite + Pinia + TailwindCSS** 的 `uni-app` 模板，内置多端开发环境配置，支持一键运行微信小程序、H5、App 及各类小程序平台。  
+本模板旨在快速搭建跨端项目，统一前端开发规范，提高开发效率。
+
+---
+
+## 📦 技术栈
+
+| 技术                               | 说明                   |
+| ---------------------------------- | ---------------------- |
+| **Vue 3**                          | 渐进式前端框架         |
+| **TypeScript**                     | 静态类型检查           |
+| **Vite**                           | 高性能构建工具         |
+| **Pinia**                          | 轻量级状态管理         |
+| **TailwindCSS**                    | 原子化 CSS 框架        |
+| **VueUse**                         | Vue3 实用工具库        |
+| **Iconify**                        | 图标库整合方案         |
+| **Day.js**                         | 日期处理库             |
+| **Crypto-js / js-md5 / js-base64** | 数据加密与编码工具     |
+| **ESLint + Prettier**              | 统一代码风格与语法检查 |
+
+---
+
+## 🚀 快速开始
+
+### 1️⃣ 安装依赖
+
+```bash
+pnpm install
+# 或
+npm install
+# 或
+yarn
+```
+
+### 2️⃣ 启动开发
+
+可根据需要启动不同端的调试模式：
+
+| 命令                           | 平台说明            |
+| ------------------------------ | ------------------- |
+| `npm run dev:h5`               | 运行 H5 页面        |
+| `npm run dev:mp-weixin`        | 运行微信小程序      |
+| `npm run dev:mp-alipay`        | 运行支付宝小程序    |
+| `npm run dev:mp-toutiao`       | 运行字节跳动小程序  |
+| `npm run dev:mp-baidu`         | 运行百度小程序      |
+| `npm run dev:mp-qq`            | 运行 QQ 小程序      |
+| `npm run dev:mp-xhs`           | 运行小红书小程序    |
+| `npm run dev:quickapp-webview` | 运行快应用          |
+| `npm run dev:h5:ssr`           | 运行 SSR 模式（H5） |
+
+---
+
+### 3️⃣ 打包构建
+
+| 命令                             | 说明             |
+| -------------------------------- | ---------------- |
+| `npm run build:h5`               | 构建 H5 版本     |
+| `npm run build:mp-weixin`        | 构建微信小程序   |
+| `npm run build:mp-alipay`        | 构建支付宝小程序 |
+| `npm run build:mp-toutiao`       | 构建字节小程序   |
+| `npm run build:h5:ssr`           | 构建 SSR H5      |
+| `npm run build:quickapp-webview` | 构建快应用       |
+
+---
+
+## 🧩 项目结构
+
+```
+uni-preset-vue/
+├── src/
+│   ├── pages/           # 页面目录
+│   ├── components/      # 公共组件
+│   ├── store/           # Pinia 状态管理
+│   ├── utils/           # 工具函数与封装
+│   ├── locales/         # i18n 国际化配置
+│   ├── styles/          # 全局样式与 Tailwind 配置
+│   └── main.ts          # 入口文件
+│
+├── uni_modules/         # uni-app 模块目录
+├── static/              # 静态资源
+├── package.json
+├── vite.config.ts
+├── tsconfig.json
+└── README.md
+```
+
+---
+
+## 🧠 开发规范
+
+### 代码规范
+
+- 使用 **TypeScript** 编写逻辑。
+
+- 使用 **ESLint + Prettier + Tailwind** 进行自动格式化。
+
+- 提交前执行：
+
+  ```bash
+  npm run type-check
+  ```
+
+  确保类型检查通过。
+
+### 目录规范
+
+- 页面统一放在 `src/pages/`
+- 公共组件放在 `src/components/`
+- 全局状态放在 `src/store/`
+- 工具函数放在 `src/utils/`
+- 样式配置统一放在 `src/styles/`
+
+---
+
+## 🧰 常用依赖说明
+
+| 依赖                                 | 用途           |
+| ------------------------------------ | -------------- |
+| `@vueuse/core`                       | 常用组合式函数 |
+| `dayjs`                              | 时间格式化     |
+| `crypto-js` / `js-md5` / `js-base64` | 数据加密与签名 |
+| `qs`                                 | 请求参数序列化 |
+| `@iconify/vue`                       | 图标组件       |
+| `pinia`                              | 全局状态管理   |
+| `vue-i18n`                           | 多语言支持     |
+
+---
+
+## 🧪 检查与优化
+
+| 命令                 | 功能                        |
+| -------------------- | --------------------------- |
+| `npm run type-check` | 类型检查                    |
+| `npm run lint`       | 语法检查                    |
+| `npm run format`     | 自动格式化（结合 Prettier） |
+
+---
+
+## 🌍 支持平台
+
+| 平台                  | 是否支持 |
+| --------------------- | -------- |
+| H5                    | ✅       |
+| 微信小程序            | ✅       |
+| 支付宝小程序          | ✅       |
+| 抖音小程序            | ✅       |
+| 百度小程序            | ✅       |
+| QQ 小程序             | ✅       |
+| 快应用                | ✅       |
+| HarmonyOS (鸿蒙 NEXT) | ✅       |
+
+---
+
+## 💡 开发建议
+
+1. 推荐使用 **VSCode** 搭配以下插件：
+
+   - 🌟 `Volar`（Vue 3 支持）
+   - 🌟 `ESLint`
+   - 🌟 `Tailwind CSS IntelliSense`
+   - 🌟 `Iconify IntelliSense`
+
+2. 若需自定义端平台启动，请修改 `package.json` 中的 `scripts` 命令。
+
+3. 统一风格建议使用 `prettier-plugin-tailwindcss` 自动调整类名顺序。
+
+---
+
+## 🧾 License
+
+本项目模板仅供学习与快速开发使用。  
+如需商用或二次封装，请保留原作者说明或在适当位置注明出处。
+
+---
+
+## 👨‍💻 作者信息
+
+- 作者：josef
+- 模板名称：`uni-preset-vue`
+- 创建时间：2025 年
+- 版本：v1.0.0
+
+---
+
+## 📅 更新日志
+
+| 日期       | 版本   | 内容           |
+| ---------- | ------ | -------------- |
+| 2025-10-13 | v1.0.0 | 初始化项目模板 |

package/index.mjs

@@ -0,0 +1,187 @@
+#!/usr/bin/env node
+import fsExtra from "fs-extra";
+import { join, resolve } from "path";
+import { fileURLToPath } from "url";
+import { spawn } from "child_process";
+import ora from "ora";
+import chalk from "chalk";
+import enquirerPkg from "enquirer";
+import gradient from "gradient-string";
+
+const { prompt } = enquirerPkg
+const { copy, readJSON, writeJSON, remove } = fsExtra;
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+// 打印欢迎信息
+function printWelcome() {
+	console.log();
+	console.log(gradient.morning("✨ 欢迎使用 UniApps 脚手架 ✨"));
+	console.log();
+}
+
+// 验证项目名称
+function isValidPackageName(projectName) {
+	return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
+		projectName
+	);
+}
+
+// 格式化项目名称
+function toValidPackageName(projectName) {
+	return projectName
+		.trim()
+		.toLowerCase()
+		.replace(/\s+/g, "-")
+		.replace(/^[._]/, "")
+		.replace(/[^a-z0-9-~]+/g, "-");
+}
+
+// 交互式提问
+async function askForOptions(targetDir) {
+	const options = await prompt([
+		{
+			type: "input",
+			name: "packageName",
+			message: "请输入项目名称",
+			initial: toValidPackageName(targetDir),
+			validate: (name) =>
+				isValidPackageName(name) || "项目名称不符合 npm 包命名规则",
+		},
+		{
+			type: "confirm",
+			name: "installDeps",
+			message: "是否立即安装依赖?",
+			initial: true,
+		},
+	]);
+
+	return options;
+}
+
+// 拷贝模板（固定模板）
+async function copyTemplate(src, dest) {
+	const spinner = ora(`正在创建项目...`).start();
+	try {
+		await copy(src, dest); // 直接拷贝 src 下的所有文件到 dest
+		spinner.succeed("项目创建成功");
+	} catch (err) {
+		spinner.fail("项目创建失败");
+		throw err;
+	}
+}
+
+
+// 更新 package.json
+async function updatePackageJson(destDir, projectName) {
+	const packageJsonPath = join(destDir, "package.json");
+	const packageJson = await readJSON(packageJsonPath);
+	packageJson.name = projectName;
+	await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
+}
+
+// 安装依赖
+async function installDependencies(destDir) {
+	const spinner = ora("正在安装依赖...").start();
+
+	try {
+		await new Promise((resolve, reject) => {
+			const installer = spawn("npm", ["install"], {
+				cwd: destDir,
+				stdio: "ignore",
+				shell: true,
+			});
+
+			installer.on("close", (code) => {
+				if (code === 0) resolve();
+				else reject(new Error(`npm install 失败，退出码 ${code}`));
+			});
+		});
+		spinner.succeed("依赖安装完成");
+	} catch (err) {
+		spinner.fail(`依赖安装失败: ${err.message}`);
+		throw err;
+	}
+}
+
+// 打印完成信息
+function printCompletion(targetDir, installDeps) {
+	console.log();
+	console.log(chalk.bold("🎉  项目创建完成!"));
+	console.log();
+
+	console.log(chalk.bold("接下来可以执行以下命令:"));
+	console.log();
+	console.log(chalk.dim(` # 进入项目目录`));
+	console.log(` cd ${chalk.cyan(targetDir)}`);
+
+	if (!installDeps) {
+		console.log(chalk.dim(` # 安装依赖`));
+		console.log(` npm install`);
+	}
+
+	console.log(chalk.dim(` # 启动开发服务器`));
+	console.log(` npm run dev`);
+	console.log();
+	console.log(chalk.dim(` # 构建生产版本`));
+	console.log(` npm run build`);
+	console.log();
+}
+
+// 主函数
+async function main() {
+	printWelcome();
+
+	// 获取目标目录
+	const targetDir = process.argv[2];
+
+	if (!targetDir) {
+		console.error(
+			chalk.red("❌ 必须指定项目名称，例如:") +
+			chalk.cyan(" npx create-uniapps my-project")
+		);
+		process.exit(1);
+	}
+
+	// 检查目录是否已存在
+	const destDir = resolve(process.cwd(), targetDir);
+	if (fsExtra.existsSync(destDir)) {
+		console.error(chalk.red(`❌ 目录 "${targetDir}" 已存在!`));
+		process.exit(1);
+	}
+
+	try {
+		// 获取用户选项
+		const options = await askForOptions(targetDir);
+
+		// 拷贝模板
+		await copyTemplate(join(__dirname, "template"), destDir);
+
+		// 更新 package.json
+		await updatePackageJson(destDir, options.packageName);
+
+		// 安装依赖
+		if (options.installDeps) {
+			await installDependencies(destDir);
+		}
+
+		// 打印完成信息
+		printCompletion(targetDir, options.installDeps);
+	} catch (err) {
+		console.error(chalk.red("❌ 创建项目失败:"), err.message);
+
+		// 清理已创建的文件
+		if (fsExtra.existsSync(destDir)) {
+			const spinner = ora("清理已创建的文件...").start();
+			await remove(destDir);
+			spinner.succeed("清理完成");
+		}
+
+		process.exit(1);
+	}
+}
+
+main().catch((err) => {
+	console.error(chalk.red("❌ 发生未预期的错误:"), err);
+	process.exit(1);
+});

package/package.json

@@ -0,0 +1,40 @@
+{
+	"name": "create-uniapps",
+	"version": "1.0.0",
+	"description": "UniApps template",
+	"main": "index.js",
+	"bin": {
+		"create-vueplus": "./index.mjs"
+	},
+	"files": [
+		"index.mjs",
+		"template",
+		"README.md"
+	],
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://gitee.com/hu-hai-aaa/uniapps.git"
+	},
+	"keywords": [
+		"uniapp",
+		"vue",
+		"nvue",
+		"vue3",
+		"vueplus",
+		"vite",
+		"cli",
+		"template"
+	],
+	"author": "josefqiao",
+	"license": "MIT",
+	"dependencies": {
+		"chalk": "^5.5.0",
+		"enquirer": "^2.4.1",
+		"fs-extra": "^11.3.0",
+		"gradient-string": "^3.0.0",
+		"ora": "^8.2.0"
+	}
+}

package/template/.prettierrc

@@ -0,0 +1,11 @@
+{
+	"plugins": [
+		"prettier-plugin-tailwindcss"
+	],
+	"vueIndentScriptAndStyle": false,
+	"printWidth": 120,
+	"singleQuote": true,
+	"semi": true,
+	"tabWidth": 4,
+	"htmlWhitespaceSensitivity": "ignore"
+}

package/template/eslint.config.mjs

@@ -0,0 +1,30 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import pluginVue, { rules } from "eslint-plugin-vue";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+	{
+		files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"],
+		plugins: { js },
+		extends: ["js/recommended"],
+	},
+	{
+		files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"],
+		languageOptions: { globals: globals.browser },
+	},
+	tseslint.configs.recommended,
+	pluginVue.configs["flat/essential"],
+	{
+		files: ["**/*.vue"],
+		languageOptions: { parserOptions: { parser: tseslint.parser } },
+	},
+	{
+		rules: {
+			"vue/multi-word-component-names": "off",
+			"vue/no-unused-vars": "error",
+			"@typescript-eslint/no-unused-vars": "warn",
+		},
+	},
+]);

package/template/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8" />
+	<script>
+		var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+			CSS.supports('top: constant(a)'))
+		document.write(
+			'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+			(coverSupport ? ', viewport-fit=cover' : '') + '" />')
+	</script>
+	<title></title>
+	<!--preload-links-->
+	<!--app-context-->
+</head>
+
+<body>
+	<div id="app"><!--app-html--></div>
+	<script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>