@jackie_qian/create-vue-app 1.0.0

package/dist/templates.js

@@ -0,0 +1,435 @@
+export function renderViteConfigJs(featureSet) {
+  const usePages = featureSet.has("pages");
+  const useAutoImport = featureSet.has("autoImport");
+  const useComponents = featureSet.has("components");
+  const useUno = featureSet.has("unocss");
+  const useVant = featureSet.has("vant");
+  const useElementPlus = featureSet.has("elementPlus");
+  const externalImports = [];
+  externalImports.push({
+    source: "@vitejs/plugin-vue",
+    line: `import vue from '@vitejs/plugin-vue'`,
+  });
+  externalImports.push({
+    source: "vite",
+    line: `import { defineConfig } from 'vite'`,
+  });
+  externalImports.push({
+    source: "vite-plugin-vue-devtools",
+    line: `import vueDevTools from 'vite-plugin-vue-devtools'`,
+  });
+  if (useVant)
+    externalImports.push({
+      source: "@vant/auto-import-resolver",
+      line: `import { VantResolver } from '@vant/auto-import-resolver'`,
+    });
+  if (useUno)
+    externalImports.push({
+      source: "unocss/vite",
+      line: `import UnoCSS from 'unocss/vite'`,
+    });
+  if (useAutoImport)
+    externalImports.push({
+      source: "unplugin-auto-import/vite",
+      line: `import AutoImport from 'unplugin-auto-import/vite'`,
+    });
+  if (useElementPlus)
+    externalImports.push({
+      source: "unplugin-vue-components/resolvers",
+      line: `import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'`,
+    });
+  if (useComponents)
+    externalImports.push({
+      source: "unplugin-vue-components/vite",
+      line: `import Components from 'unplugin-vue-components/vite'`,
+    });
+  if (usePages)
+    externalImports.push({
+      source: "vite-plugin-pages",
+      line: `import Pages from 'vite-plugin-pages'`,
+    });
+  externalImports.sort((a, b) => a.source.localeCompare(b.source));
+  const importLines = [
+    `import { fileURLToPath, URL } from 'node:url'`,
+    ...externalImports.map((i) => i.line),
+  ];
+  const plugins = [];
+  const resolverItems = [];
+  if (useVant) resolverItems.push("VantResolver()");
+  if (useElementPlus) resolverItems.push("ElementPlusResolver()");
+  const resolvers = resolverItems.length
+    ? `[${resolverItems.join(", ")}]`
+    : "[]";
+  if (usePages) {
+    plugins.push(`Pages({
+      dirs: 'src/views',
+      extensions: ['vue', 'ts'],
+      importMode: 'async'
+    })`);
+  }
+  if (useComponents) {
+    plugins.push(`Components({
+      resolvers: ${resolvers},
+      dts: 'src/types/components.d.ts',
+      dirs: ['src/components']
+    })`);
+  }
+  if (useAutoImport) {
+    const imports = featureSet.has("pinia") ? `['vue', 'pinia']` : `['vue']`;
+    plugins.push(`AutoImport({
+      resolvers: ${resolvers},
+      imports: ${imports},
+      dts: 'src/types/auto-import.d.ts',
+      dirs: ['src/hooks'],
+      vueTemplate: true
+    })`);
+  }
+  if (useUno) plugins.push(`UnoCSS()`);
+  plugins.push(`vue()`);
+  plugins.push(`vueDevTools()`);
+  return `${importLines.join("\n")}
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    ${plugins.join(",\n    ")}
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
+`;
+}
+export function renderViteConfig(language, featureSet) {
+  if (language === "js") return renderViteConfigJs(featureSet);
+  const isTs = true;
+  const usePages = featureSet.has("pages");
+  const useAutoImport = featureSet.has("autoImport");
+  const useComponents = featureSet.has("components");
+  const useVant = featureSet.has("vant");
+  const useElementPlus = featureSet.has("elementPlus");
+  const useUno = featureSet.has("unocss");
+  const useEslint = featureSet.has("eslintAntfu");
+  const externalImports = [];
+  externalImports.push({
+    source: "@vitejs/plugin-vue",
+    line: `import vue from '@vitejs/plugin-vue'`,
+  });
+  externalImports.push({
+    source: "vite",
+    line: `import { defineConfig } from 'vite'`,
+  });
+  if (useVant)
+    externalImports.push({
+      source: "@vant/auto-import-resolver",
+      line: `import { VantResolver } from '@vant/auto-import-resolver'`,
+    });
+  if (useUno)
+    externalImports.push({
+      source: "unocss/vite",
+      line: `import UnoCSS from 'unocss/vite'`,
+    });
+  if (useAutoImport)
+    externalImports.push({
+      source: "unplugin-auto-import/vite",
+      line: `import AutoImport from 'unplugin-auto-import/vite'`,
+    });
+  if (useElementPlus)
+    externalImports.push({
+      source: "unplugin-vue-components/resolvers",
+      line: `import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'`,
+    });
+  if (useComponents)
+    externalImports.push({
+      source: "unplugin-vue-components/vite",
+      line: `import Components from 'unplugin-vue-components/vite'`,
+    });
+  if (usePages)
+    externalImports.push({
+      source: "vite-plugin-pages",
+      line: `import Pages from 'vite-plugin-pages'`,
+    });
+  externalImports.sort((a, b) => a.source.localeCompare(b.source));
+  const importLines = [
+    `import { fileURLToPath, URL } from 'node:url'`,
+    ...externalImports.map((i) => i.line),
+  ];
+  const plugins = [];
+  if (usePages) {
+    const dirs = isTs ? "src/pages" : "src/views";
+    const extensions = isTs ? `['vue', 'ts']` : `['vue', 'js']`;
+    plugins.push(
+      `Pages({ dirs: '${dirs}', extensions: ${extensions}, importMode: 'async' })`,
+    );
+  }
+  const resolverItems = [];
+  if (useVant) resolverItems.push("VantResolver()");
+  if (useElementPlus) resolverItems.push("ElementPlusResolver()");
+  const resolvers = resolverItems.length
+    ? `[${resolverItems.join(", ")}]`
+    : `[]`;
+  if (useAutoImport) {
+    const imports = ["vue"];
+    if (featureSet.has("router")) imports.push("vue-router");
+    if (featureSet.has("pinia")) imports.push("pinia");
+    const eslintrc = useEslint ? `, eslintrc: { enabled: true }` : "";
+    plugins.push(
+      `AutoImport({ resolvers: ${resolvers}, imports: ${JSON.stringify(imports)}, dts: 'src/types/auto-import.d.ts', vueTemplate: true${eslintrc} })`,
+    );
+  }
+  if (useComponents) {
+    plugins.push(
+      `Components({ resolvers: ${resolvers}, dts: 'src/types/components.d.ts' })`,
+    );
+  }
+  if (useUno) plugins.push(`UnoCSS()`);
+  plugins.push("vue()");
+  return `${importLines.join("\n")}
+
+export default defineConfig({
+  plugins: [
+    ${plugins.join(",\n    ")}
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
+`;
+}
+export function renderUnoConfig(language) {
+  return `import { defineConfig, presetAttributify, presetWind3, transformerDirectives } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetAttributify(),
+    presetWind3()
+  ],
+  transformers: [
+    transformerDirectives()
+  ],
+  layers: {
+    components: -1,
+    default: 1,
+    utilities: 2
+  }
+})
+`;
+}
+export function renderVsCodeSettings() {
+  return `{
+  "eslint.useFlatConfig": true,
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "stylelint.validate": [
+    "css",
+    "postcss",
+    "scss",
+    "vue"
+  ],
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ],
+  "css.lint.unknownAtRules": "ignore",
+  "scss.lint.unknownAtRules": "ignore",
+  "scss.lint.unknownProperties": "ignore",
+  "cSpell.enabled": false
+}
+`;
+}
+export function renderEditorConfig() {
+  return `root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
+`;
+}
+export function renderEnv(title) {
+  return `# 页面标题
+VITE_APP_TITLE = ${title}
+
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VITE_APP_API_BASEURL = /
+`;
+}
+export function renderJsConfig() {
+  return `{
+  "compilerOptions": {
+    "target": "ESNext",
+    "baseUrl": "./",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "allowJs": true
+  },
+  "include": ["src/*.js", "src/**/*.js", "src/**/*.vue", "src/**/*.d.ts"],
+  "exclude": ["node_modules"]
+}
+`;
+}
+export function renderMainJs(featureSet) {
+  const lines = [];
+  lines.push(`import { createApp } from 'vue'`);
+  lines.push("");
+  lines.push(`import App from './App.vue'`);
+  if (featureSet.has("router")) lines.push(`import router from './router'`);
+  if (featureSet.has("pinia")) lines.push(`import Pinia from './stores/index'`);
+  if (featureSet.has("vant")) lines.push(`import 'vant/lib/index.css'`);
+  if (featureSet.has("elementPlus"))
+    lines.push(`import 'element-plus/dist/index.css'`);
+  if (featureSet.has("sassEmbedded"))
+    lines.push(`import './assets/styles/main.scss'`);
+  lines.push("");
+  lines.push(`const app = createApp(App)`);
+  lines.push("");
+  if (featureSet.has("router")) lines.push(`app.use(router)`);
+  if (featureSet.has("pinia")) lines.push(`app.use(Pinia)`);
+  lines.push("");
+  lines.push(`app.mount('#app')`);
+  lines.push("");
+  return `${lines.join("\n")}`;
+}
+export function renderRouter(language, usePages) {
+  const ext = language === "ts" ? "ts" : "js";
+  if (usePages) {
+    return {
+      fileName: `src/router/index.${ext}`,
+      content: `import { createRouter, createWebHistory } from 'vue-router'
+import routes from '~pages'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router
+`,
+    };
+  }
+  const importRoutes = `import IndexView from '../views/index.vue'`;
+  const routesDecl = `[
+    { name: 'Index', path: '/', component: IndexView }
+  ]`;
+  return {
+    fileName: `src/router/index.${ext}`,
+    content: `import { createRouter, createWebHistory } from 'vue-router'
+${importRoutes}
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: ${routesDecl}
+})
+
+export default router
+`,
+  };
+}
+export function renderStore(language, persisted) {
+  const ext = language === "ts" ? "ts" : "js";
+  const lines = [];
+  lines.push(`import { createPinia } from 'pinia'`);
+  if (persisted)
+    lines.push(
+      `import { createPersistedState } from 'pinia-plugin-persistedstate'`,
+    );
+  lines.push("");
+  lines.push("const store = createPinia()");
+  if (persisted) lines.push("store.use(createPersistedState())");
+  lines.push("");
+  lines.push("export default store");
+  lines.push("");
+  return {
+    fileName: `src/stores/index.${ext}`,
+    content: `${lines.join("\n")}`,
+  };
+}
+export function renderHomeView() {
+  return `<template>
+  <div class="page">
+    <h1>Home</h1>
+  </div>
+</template>
+`;
+}
+export function renderPagesIndex() {
+  return `<template>
+  <div class="page">
+    <h1>Home</h1>
+  </div>
+</template>
+`;
+}
+export function renderAppWithRouter() {
+  return `<template>
+  <RouterView />
+</template>
+`;
+}
+export function patchMain(content, options) {
+  const mainImports = [];
+  const usesCreateApp = content.includes("createApp(");
+  if (!usesCreateApp) return content;
+  if (options.useUno && !content.includes("virtual:uno.css"))
+    mainImports.push(`import 'virtual:uno.css'`);
+  if (options.useVant && !content.includes("vant/lib/index.css"))
+    mainImports.push(`import 'vant/lib/index.css'`);
+  if (
+    options.useElementPlus &&
+    !content.includes("element-plus/dist/index.css")
+  )
+    mainImports.push(`import 'element-plus/dist/index.css'`);
+  if (options.useRouter && !content.includes("from './router'"))
+    mainImports.push(`import router from './router'`);
+  if (options.useStore && !content.includes("from './stores'"))
+    mainImports.push(`import store from './stores'`);
+  const importBlock = mainImports.length ? `${mainImports.join("\n")}\n` : "";
+  const useBlock = [
+    options.useStore ? "app.use(store)" : "",
+    options.useRouter ? "app.use(router)" : "",
+  ]
+    .filter(Boolean)
+    .join("\n");
+  const withUse = useBlock ? `\n${useBlock}\n` : "\n";
+  const replaced = content.replace(
+    /import\s+\{\s*createApp\s*\}\s+from\s+'vue'\s*\n/,
+    (match) => `${match}${importBlock}`,
+  );
+  if (useBlock) {
+    return replaced
+      .replace(/app\.mount\('#app'\)\s*\n?/, `app.mount('#app')\n`)
+      .replace(
+        /const\s+app\s*=\s*createApp\(App\)\s*\n([\s\S]*?)app\.mount\('#app'\)/,
+        (m, between) => {
+          if (between.includes("app.use(")) return m;
+          return m.replace("app.mount('#app')", `${withUse}app.mount('#app')`);
+        },
+      );
+  }
+  return replaced;
+}

package/dist/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/constants.js

@@ -0,0 +1,20 @@
+export const FEATURES_OPTIONS = [
+  { value: "router", label: "Router (SPA 开发)" },
+  { value: "pinia", label: "Pinia (状态管理)" },
+  { value: "piniaPersist", label: "Pinia 状态持久化" },
+  { value: "sassEmbedded", label: "SassEmbedded" },
+  { value: "eslintAntfu", label: "ESLint (Antfu 风格)" },
+  { value: "stylelint", label: "Stylelint" },
+  { value: "gitHooks", label: "GitHooks (simple-git-hooks + lint-staged)" },
+];
+export const UI_LIBRARY_OPTIONS = [
+  { value: "vant", label: "Vant" },
+  { value: "elementPlus", label: "Element Plus" },
+  { value: "none", label: "不使用" },
+];
+export const PACKAGE_MANAGER_OPTIONS = [
+  { value: "pnpm", label: "pnpm" },
+  { value: "npm", label: "npm" },
+  { value: "yarn", label: "yarn" },
+  { value: "bun", label: "bun" },
+];

package/dist/utils/util.js

@@ -0,0 +1,168 @@
+import { spawnSync } from "node:child_process";
+import { promises as fs } from "node:fs";
+import path from "node:path";
+export function runCapture(cmd, args, cwd) {
+  const result = spawnSync(cmd, args, { cwd, encoding: "utf8" });
+  if (result.status !== 0) throw new Error(`${cmd} ${args.join(" ")} 执行失败`);
+  return `${result.stdout ?? ""}`.trim();
+}
+export function run(cmd, args, cwd) {
+  const result = spawnSync(cmd, args, { cwd, stdio: "inherit" });
+  if (result.status !== 0) throw new Error(`${cmd} ${args.join(" ")} 执行失败`);
+}
+export function installCommand(pm) {
+  if (pm === "pnpm") return { cmd: "pnpm", args: ["install"] };
+  if (pm === "npm") return { cmd: "npm", args: ["install"] };
+  if (pm === "yarn") return { cmd: "yarn", args: [] };
+  return { cmd: "bun", args: ["install"] };
+}
+export function devCommand(pm) {
+  if (pm === "pnpm") return "pnpm dev";
+  if (pm === "npm") return "npm run dev";
+  if (pm === "yarn") return "yarn dev";
+  return "bun dev";
+}
+export function sortObjectKeys(obj) {
+  return Object.fromEntries(
+    Object.entries(obj).sort(([a], [b]) => a.localeCompare(b)),
+  );
+}
+export async function pathExists(p) {
+  try {
+    await fs.access(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+export async function ensureEmptyDir(dir) {
+  if (!(await pathExists(dir))) return;
+  const items = await fs.readdir(dir);
+  if (items.length > 0) throw new Error(`目录已存在且非空: ${dir}`);
+}
+export async function writeFileEnsureDir(filePath, content) {
+  await fs.mkdir(path.dirname(filePath), { recursive: true });
+  await fs.writeFile(filePath, content, "utf8");
+}
+export async function removePath(targetPath) {
+  await fs.rm(targetPath, { recursive: true, force: true });
+}
+export async function copyDir(srcDir, destDir, options) {
+  const skip = options?.skip;
+  const root = srcDir;
+  async function walk(currentSrc, currentDest) {
+    await fs.mkdir(currentDest, { recursive: true });
+    const entries = await fs.readdir(currentSrc, { withFileTypes: true });
+    for (const entry of entries) {
+      const srcPath = path.join(currentSrc, entry.name);
+      const destPath = path.join(currentDest, entry.name);
+      const rel = path.relative(root, srcPath);
+      if (skip?.(rel)) continue;
+      if (entry.isDirectory()) {
+        await walk(srcPath, destPath);
+        continue;
+      }
+      if (entry.isSymbolicLink()) {
+        const link = await fs.readlink(srcPath);
+        await fs.symlink(link, destPath);
+        continue;
+      }
+      await fs.copyFile(srcPath, destPath);
+    }
+  }
+  await walk(srcDir, destDir);
+}
+export function stripJsonc(input) {
+  const s = input.replace(/^\uFEFF/, "");
+  let out = "";
+  let i = 0;
+  let inString = false;
+  let stringQuote = null;
+  let escaped = false;
+  while (i < s.length) {
+    const ch = s[i];
+    const next = s[i + 1];
+    if (inString) {
+      out += ch;
+      if (escaped) {
+        escaped = false;
+      } else if (ch === "\\") {
+        escaped = true;
+      } else if (stringQuote && ch === stringQuote) {
+        inString = false;
+        stringQuote = null;
+      }
+      i += 1;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      inString = true;
+      stringQuote = ch;
+      out += ch;
+      i += 1;
+      continue;
+    }
+    if (ch === "/" && next === "/") {
+      i += 2;
+      while (i < s.length && s[i] !== "\n") i += 1;
+      continue;
+    }
+    if (ch === "/" && next === "*") {
+      i += 2;
+      while (i < s.length) {
+        if (s[i] === "*" && s[i + 1] === "/") {
+          i += 2;
+          break;
+        }
+        i += 1;
+      }
+      continue;
+    }
+    out += ch;
+    i += 1;
+  }
+  let cleaned = out;
+  for (let round = 0; round < 5; round += 1) {
+    const next = cleaned.replace(/,\s*([}\]])/g, "$1");
+    if (next === cleaned) break;
+    cleaned = next;
+  }
+  return cleaned;
+}
+export function parseJsonLike(raw) {
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return JSON.parse(stripJsonc(raw));
+  }
+}
+export async function readJson(filePath) {
+  const raw = await fs.readFile(filePath, "utf8");
+  return parseJsonLike(raw);
+}
+export async function writeJson(filePath, data) {
+  await fs.writeFile(filePath, `${JSON.stringify(data, null, 2)}\n`, "utf8");
+}
+export async function resolveLatestStableVersion(pkgName, cwd) {
+  const raw = runCapture("npm", ["view", pkgName, "version", "--json"], cwd);
+  const v = parseJsonLike(raw);
+  const version = typeof v === "string" ? v : String(v);
+  if (version.includes("-"))
+    throw new Error(`无法解析 ${pkgName} 的稳定版本：${version}`);
+  return version;
+}
+export async function applyLatestStableRanges(pkg, cwd) {
+  const cache = new Map();
+  const sections = ["dependencies", "devDependencies"];
+  for (const section of sections) {
+    const deps = pkg[section];
+    if (!deps) continue;
+    for (const name of Object.keys(deps)) {
+      const current = deps[name];
+      if (!current || current.startsWith("workspace:")) continue;
+      if (!cache.has(name))
+        cache.set(name, await resolveLatestStableVersion(name, cwd));
+      deps[name] = `^${cache.get(name)}`;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@jackie_qian/create-vue-app",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "",
+  "main": "dist/index.js",
+  "bin": {
+    "create-vue-app": "bin/index.mjs"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist",
+    "bin"
+  ],
+  "scripts": {
+    "dev": "tsx src/index.ts",
+    "build": "tsc -p tsconfig.cli.json",
+    "typecheck": "tsc -p tsconfig.cli.json --noEmit",
+    "format:dist": "prettier --write \"dist/**/*.js\" --tab-width 2 --use-tabs false",
+    "prepublishOnly": "pnpm build && pnpm format:dist"
+  },
+  "keywords": [],
+  "author": "Jackie_Qian",
+  "license": "ISC",
+  "packageManager": "pnpm@10.13.1",
+  "dependencies": {
+    "@clack/prompts": "^1.1.0",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "prettier": "^3.3.3",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  }
+}