@jackie_qian/create-vue-app 1.0.0

package/bin/index.mjs

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+import('../dist/index.js').catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

package/dist/cli.js

@@ -0,0 +1,348 @@
+import {
+  cancel,
+  confirm,
+  intro,
+  isCancel,
+  multiselect,
+  outro,
+  select,
+  spinner,
+  text,
+} from "@clack/prompts";
+import pc from "picocolors";
+import path from "node:path";
+import {
+  FEATURES_OPTIONS,
+  PACKAGE_MANAGER_OPTIONS,
+  UI_LIBRARY_OPTIONS,
+} from "./utils/constants.js";
+import {
+  devCommand,
+  ensureEmptyDir,
+  installCommand,
+  pathExists,
+  run,
+  writeFileEnsureDir,
+} from "./utils/util.js";
+import {
+  patchMain,
+  renderAppWithRouter,
+  renderEditorConfig,
+  renderEnv,
+  renderHomeView,
+  renderPagesIndex,
+  renderRouter,
+  renderStore,
+  renderUnoConfig,
+  renderVsCodeExtensions,
+  renderVsCodeSettings,
+  renderViteConfig,
+} from "./templates/index.js";
+import {
+  addDep,
+  applyExampleTemplateJs,
+  ensureCounterStoreInModules,
+  finalizePackageJson,
+  loadPackageJson,
+  patchTsconfigApp,
+  readTextFile,
+  updateTsconfigTypes,
+  writeEslintConfig,
+  writePackageJson,
+  writeStylelintConfig,
+  writeTextFile,
+} from "./scaffold.js";
+function exitWithCancel() {
+  cancel("已取消");
+  process.exit(1);
+}
+function normalizeProjectName(input) {
+  return input.trim().replaceAll(" ", "-");
+}
+function toFeatureSet(values) {
+  return new Set(values);
+}
+export async function main() {
+  intro(pc.cyan("自定义 Vue3 模板生成器"));
+  const useDefaults = process.argv.includes("--defaults");
+  const preferJs = process.argv.includes("--js");
+  const argName = process.argv.slice(2).find((a) => !a.startsWith("-"));
+  let projectName;
+  let language;
+  let features;
+  let installDeps;
+  let packageManager;
+  let uiLibrary;
+  if (useDefaults) {
+    projectName = normalizeProjectName(argName ?? "my-app");
+    language = preferJs ? "js" : "ts";
+    features = toFeatureSet([
+      "router",
+      "pinia",
+      "piniaPersist",
+      "sassEmbedded",
+      "eslintAntfu",
+      "stylelint",
+      "gitHooks",
+      "pages",
+      "autoImport",
+      "components",
+      "unocss",
+    ]);
+    installDeps = false;
+    packageManager = "pnpm";
+    uiLibrary = "none";
+  } else {
+    const projectNameRaw = await text({
+      message: "项目目录名: ",
+      initialValue: argName ?? "",
+      validate: (v) => {
+        const name = normalizeProjectName(String(v ?? ""));
+        if (!name) return "请输入项目名";
+        if (name === ".") return "不支持使用 . 作为项目名";
+        return undefined;
+      },
+    });
+    if (isCancel(projectNameRaw)) exitWithCancel();
+    projectName = normalizeProjectName(String(projectNameRaw));
+    const useTsRaw = await confirm({
+      message: "使用 TypeScript?",
+      initialValue: true,
+    });
+    if (isCancel(useTsRaw)) exitWithCancel();
+    language = Boolean(useTsRaw) ? "ts" : "js";
+    const featuresSelected = await multiselect({
+      message:
+        "选择要包含在项目中的功能：（↑/↓为导航，空格为选择，a为切换全部，输入为确认）",
+      options: [...FEATURES_OPTIONS],
+      initialValues: ["router", "pinia"],
+    });
+    if (isCancel(featuresSelected)) exitWithCancel();
+    features = toFeatureSet(featuresSelected);
+    if (features.has("piniaPersist")) features.add("pinia");
+    uiLibrary = await select({
+      message: "选择 UI 库",
+      options: [...UI_LIBRARY_OPTIONS],
+      initialValue: "",
+    });
+    if (isCancel(uiLibrary)) exitWithCancel();
+    if (uiLibrary === "vant") {
+      features.add("vant");
+      features.add("autoImport");
+      features.add("components");
+    } else if (uiLibrary === "elementPlus") {
+      features.add("elementPlus");
+      features.add("autoImport");
+      features.add("components");
+    }
+    if (features.has("router")) features.add("pages");
+    features.add("autoImport");
+    features.add("components");
+    features.add("unocss");
+    packageManager = await select({
+      message:
+        "Which package manager will you use? (Vue 3.6 beta requires version overrides that differ per package manager)",
+      options: [...PACKAGE_MANAGER_OPTIONS],
+      initialValue: "pnpm",
+    });
+    if (isCancel(packageManager)) exitWithCancel();
+    const installDepsRaw = await confirm({
+      message: `生成后是否自动安装依赖（${packageManager} install）？`,
+      initialValue: true,
+    });
+    if (isCancel(installDepsRaw)) exitWithCancel();
+    installDeps = Boolean(installDepsRaw);
+  }
+  const cwd = process.cwd();
+  const targetDir = path.resolve(cwd, projectName);
+  const s = spinner();
+  s.start("生成基础项目");
+  try {
+    await ensureEmptyDir(targetDir);
+    const flags = ["--bare", "--force"];
+    if (language === "ts") flags.push("--ts");
+    if (features.has("router")) flags.push("--router");
+    if (features.has("pinia")) flags.push("--pinia");
+    if (flags.length === 2) flags.push("--default");
+    run("pnpm", ["dlx", "create-vue@latest", ...flags, projectName], cwd);
+    s.stop("基础项目已生成");
+  } catch (e) {
+    s.stop("生成失败");
+    throw e;
+  }
+  if (language === "js") {
+    await applyExampleTemplateJs(targetDir, projectName, features);
+    await writeFileEnsureDir(
+      path.join(targetDir, ".vscode/settings.json"),
+      renderVsCodeSettings(),
+    );
+    await writeFileEnsureDir(
+      path.join(targetDir, ".vscode/extensions.json"),
+      renderVsCodeExtensions(language, features),
+    );
+    if (installDeps) {
+      const s2 = spinner();
+      s2.start("安装依赖");
+      try {
+        const { cmd, args } = installCommand(packageManager);
+        run(cmd, args, targetDir);
+        s2.stop("依赖已安装");
+      } catch (e) {
+        s2.stop("依赖安装失败");
+        throw e;
+      }
+    }
+    outro(
+      `${pc.green("完成")}：${pc.cyan(projectName)}\n\n${pc.dim("下一步：")}\n  cd ${projectName}\n  ${devCommand(packageManager)}`,
+    );
+    return;
+  }
+  const projectPkgPath = path.join(targetDir, "package.json");
+  const pkg = await loadPackageJson(projectPkgPath);
+  pkg.name = pkg.name || projectName;
+  if (features.has("router")) addDep(pkg.dependencies, "vue-router", "^4.5.1");
+  if (features.has("pinia")) addDep(pkg.dependencies, "pinia", "^3.0.3");
+  if (features.has("piniaPersist"))
+    addDep(pkg.dependencies, "pinia-plugin-persistedstate", "^4.2.0");
+  if (features.has("vant")) addDep(pkg.dependencies, "vant", "^4.9.22");
+  if (features.has("elementPlus"))
+    addDep(pkg.dependencies, "element-plus", "^2.7.6");
+  if (features.has("pages"))
+    addDep(pkg.devDependencies, "vite-plugin-pages", "^0.33.0");
+  if (features.has("autoImport"))
+    addDep(pkg.devDependencies, "unplugin-auto-import", "^0.19.0");
+  if (features.has("components"))
+    addDep(pkg.devDependencies, "unplugin-vue-components", "^0.28.0");
+  if (features.has("vant"))
+    addDep(pkg.devDependencies, "@vant/auto-import-resolver", "^1.3.0");
+  if (features.has("unocss")) addDep(pkg.devDependencies, "unocss", "^0.64.0");
+  if (features.has("eslintAntfu")) {
+    addDep(pkg.devDependencies, "eslint", "^9.0.0");
+    addDep(pkg.devDependencies, "@antfu/eslint-config", "^4.0.0");
+  }
+  if (features.has("stylelint")) {
+    addDep(pkg.devDependencies, "stylelint", "^16.0.0");
+    addDep(pkg.devDependencies, "@stylistic/stylelint-config", "^3.0.0");
+    addDep(pkg.devDependencies, "stylelint-config-recess-order", "^6.0.0");
+    addDep(pkg.devDependencies, "stylelint-config-standard-scss", "^14.0.0");
+    addDep(pkg.devDependencies, "stylelint-config-standard-vue", "^1.0.0");
+    addDep(pkg.devDependencies, "stylelint-scss", "^6.0.0");
+  }
+  if (features.has("gitHooks")) {
+    addDep(pkg.devDependencies, "simple-git-hooks", "^2.11.1");
+    addDep(pkg.devDependencies, "lint-staged", "^15.2.0");
+  }
+  if (features.has("sassEmbedded"))
+    addDep(pkg.devDependencies, "sass-embedded", "^1.77.0");
+  if (features.has("eslintAntfu") && features.has("stylelint")) {
+    addDep(pkg.devDependencies, "npm-run-all2", "^7.0.2");
+    pkg.scripts.lint = "npm-run-all -s lint:eslint lint:stylelint";
+    pkg.scripts["lint:eslint"] = "eslint --fix";
+    pkg.scripts["lint:stylelint"] = 'stylelint "src/**/*.{css,scss,vue}" --fix';
+  } else if (features.has("eslintAntfu")) {
+    pkg.scripts.lint = "eslint";
+    pkg.scripts["lint:fix"] = "eslint --fix";
+  } else if (features.has("stylelint")) {
+    pkg.scripts.lint = "stylelint";
+    pkg.scripts["lint:stylelint"] = 'stylelint "src/**/*.{css,scss,vue}" --fix';
+  }
+  if (features.has("gitHooks")) {
+    pkg.scripts.prepare = "simple-git-hooks";
+    pkg["simple-git-hooks"] = {
+      "pre-commit": "pnpm lint-staged",
+      preserveUnused: true,
+    };
+    pkg["lint-staged"] = { "*.{js,ts,vue}": "pnpm lint" };
+  }
+  await finalizePackageJson(pkg, targetDir);
+  await writePackageJson(projectPkgPath, pkg);
+  const viteConfigPath = path.join(targetDir, "vite.config.ts");
+  await writeFileEnsureDir(
+    viteConfigPath,
+    renderViteConfig(language, features),
+  );
+  await writeFileEnsureDir(
+    path.join(targetDir, ".vscode/settings.json"),
+    renderVsCodeSettings(),
+  );
+  await writeFileEnsureDir(
+    path.join(targetDir, ".vscode/extensions.json"),
+    renderVsCodeExtensions(language, features),
+  );
+  await writeFileEnsureDir(
+    path.join(targetDir, ".editorconfig"),
+    renderEditorConfig(),
+  );
+  await writeFileEnsureDir(
+    path.join(targetDir, ".env.development"),
+    renderEnv(projectName),
+  );
+  await writeFileEnsureDir(
+    path.join(targetDir, ".env.production"),
+    renderEnv(projectName),
+  );
+  await patchTsconfigApp(targetDir);
+  if (features.has("unocss")) {
+    const unoPath = path.join(targetDir, "uno.config.ts");
+    await writeFileEnsureDir(unoPath, renderUnoConfig(language));
+  }
+  const mainPath = path.join(targetDir, "src/main.ts");
+  const appPath = path.join(targetDir, "src/App.vue");
+  if (features.has("router")) {
+    const router = renderRouter(language, features.has("pages"));
+    await writeFileEnsureDir(
+      path.join(targetDir, router.fileName),
+      router.content,
+    );
+    await writeFileEnsureDir(appPath, renderAppWithRouter());
+    if (features.has("pages")) {
+      const pagesDir = "src/pages";
+      await writeFileEnsureDir(
+        path.join(targetDir, pagesDir, "index.vue"),
+        renderPagesIndex(),
+      );
+      await updateTsconfigTypes(targetDir, ["vite-plugin-pages/client"]);
+    } else {
+      await writeFileEnsureDir(
+        path.join(targetDir, "src/views/HomeView.vue"),
+        renderHomeView(),
+      );
+    }
+  }
+  if (features.has("pinia")) {
+    const store = renderStore(language, features.has("piniaPersist"));
+    await writeFileEnsureDir(
+      path.join(targetDir, store.fileName),
+      store.content,
+    );
+    await ensureCounterStoreInModules(targetDir, language);
+  }
+  if (await pathExists(mainPath)) {
+    const mainRaw = await readTextFile(mainPath);
+    const patched = patchMain(mainRaw, {
+      useRouter: features.has("router"),
+      useStore: features.has("pinia"),
+      useVant: features.has("vant"),
+      useElementPlus: features.has("elementPlus"),
+      useUno: features.has("unocss"),
+    });
+    await writeTextFile(mainPath, patched);
+  }
+  await writeEslintConfig(targetDir, features);
+  await writeStylelintConfig(targetDir, features);
+  if (installDeps) {
+    const s2 = spinner();
+    s2.start("安装依赖");
+    try {
+      const { cmd, args } = installCommand(packageManager);
+      run(cmd, args, targetDir);
+      s2.stop("依赖已安装");
+    } catch (e) {
+      s2.stop("依赖安装失败");
+      throw e;
+    }
+  }
+  outro(
+    `${pc.green("完成")}：${pc.cyan(projectName)}\n\n${pc.dim("下一步：")}\n  cd ${projectName}\n  ${devCommand(packageManager)}`,
+  );
+}

package/dist/index.js

@@ -0,0 +1,6 @@
+import pc from "picocolors";
+import { main } from "./cli.js";
+main().catch((e) => {
+  console.error(pc.red(String(e?.message ?? e)));
+  process.exit(1);
+});