@jackie_qian/create-vue-app 1.0.4 → 1.0.6

package/README.md

@@ -0,0 +1,48 @@
+# @jackie_qian/create-vue-app
+
+自定义 Vue3 模板生成器。
+
+## 快速开始
+
+### 方式 1：pnpm create（推荐）
+
+```bash
+pnpm create @jackie_qian/vue-app@latest <my-app-name>
+cd my-app
+pnpm install
+pnpm dev
+```
+
+### 方式 2：npx
+
+```bash
+npx @jackie_qian/create-vue-app@latest <my-app-name>
+```
+
+### 方式 3：全局安装
+
+```bash
+npm i -g @jackie_qian/create-vue-app
+create-vue-app <my-app-name>
+```
+
+## 参数
+
+- `--defaults`：跳过交互，使用默认选项
+- `--js`：仅配合 `--defaults` 使用，生成 JS 项目（默认生成 TS）
+
+示例：
+
+```bash
+pnpm create @jackie_qian/vue-app@latest --defaults my-app
+pnpm create @jackie_qian/vue-app@latest --defaults --js my-app
+```
+
+## 说明
+
+- 该脚手架会先调用 `create-vue@latest` 生成基础项目，然后按选择的功能进行二次改造。
+- 如果遇到网络或 registry 问题，建议临时指定官方源：
+
+```bash
+pnpm create @jackie_qian/vue-app@latest --registry=https://registry.npmjs.org/ my-app
+```

package/dist/cli.js

@@ -139,7 +139,6 @@ export async function main() {
     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)",
@@ -181,6 +180,8 @@ export async function main() {
       path.join(targetDir, ".vscode/extensions.json"),
       renderVsCodeExtensions(language, features),
     );
+    await writeEslintConfig(targetDir, language, features);
+    await writeStylelintConfig(targetDir, features);
     if (installDeps) {
       const s2 = spinner();
       s2.start("安装依赖");
@@ -329,7 +330,7 @@ export async function main() {
     });
     await writeTextFile(mainPath, patched);
   }
-  await writeEslintConfig(targetDir, features);
+  await writeEslintConfig(targetDir, language, features);
   await writeStylelintConfig(targetDir, features);
   if (installDeps) {
     const s2 = spinner();

package/dist/scaffold.js

@@ -11,10 +11,13 @@ import {
 } from "./utils/util.js";
 import {
   renderEnv,
+  renderEslintAutoImportGlobalsJson,
+  renderEslintConfig,
   renderJsConfig,
   renderMainJs,
   renderRouter,
   renderStore,
+  renderStylelintConfig,
   renderViteConfig,
 } from "./templates/index.js";
 export function getExampleTemplateDir() {
@@ -118,6 +121,42 @@ export async function applyExampleTemplateJs(targetDir, projectName, features) {
   const removeDep = (obj, name) => {
     if (obj[name]) delete obj[name];
   };
+  const ensureDep = (obj, name, version) => {
+    obj[name] ??= version;
+  };
+  if (features.has("router"))
+    ensureDep(pkg.dependencies, "vue-router", "^4.5.1");
+  if (features.has("pinia")) ensureDep(pkg.dependencies, "pinia", "^3.0.3");
+  if (features.has("piniaPersist"))
+    ensureDep(pkg.dependencies, "pinia-plugin-persistedstate", "^4.2.0");
+  if (features.has("pages"))
+    ensureDep(pkg.devDependencies, "vite-plugin-pages", "^0.33.0");
+  if (features.has("autoImport"))
+    ensureDep(pkg.devDependencies, "unplugin-auto-import", "^0.19.0");
+  if (features.has("components"))
+    ensureDep(pkg.devDependencies, "unplugin-vue-components", "^0.28.0");
+  if (features.has("unocss"))
+    ensureDep(pkg.devDependencies, "unocss", "^0.64.0");
+  if (features.has("eslintAntfu")) {
+    ensureDep(pkg.devDependencies, "eslint", "^9.0.0");
+    ensureDep(pkg.devDependencies, "@antfu/eslint-config", "^4.0.0");
+  }
+  if (features.has("stylelint")) {
+    ensureDep(pkg.devDependencies, "stylelint", "^16.0.0");
+    ensureDep(pkg.devDependencies, "@stylistic/stylelint-config", "^3.0.0");
+    ensureDep(pkg.devDependencies, "stylelint-config-recess-order", "^6.0.0");
+    ensureDep(pkg.devDependencies, "stylelint-config-standard-scss", "^14.0.0");
+    ensureDep(pkg.devDependencies, "stylelint-config-standard-vue", "^1.0.0");
+    ensureDep(pkg.devDependencies, "stylelint-scss", "^6.0.0");
+  }
+  if (features.has("sassEmbedded"))
+    ensureDep(pkg.devDependencies, "sass-embedded", "^1.77.0");
+  if (features.has("gitHooks")) {
+    ensureDep(pkg.devDependencies, "simple-git-hooks", "^2.11.1");
+    ensureDep(pkg.devDependencies, "lint-staged", "^15.2.0");
+  }
+  if (features.has("eslintAntfu") && features.has("stylelint"))
+    ensureDep(pkg.devDependencies, "npm-run-all2", "^7.0.2");
   if (!features.has("router")) removeDep(pkg.dependencies, "vue-router");
   if (!features.has("pinia")) {
     removeDep(pkg.dependencies, "pinia");
@@ -258,95 +297,26 @@ export async function applyExampleTemplateJs(targetDir, projectName, features) {
   if (!features.has("sassEmbedded"))
     await removePath(path.join(targetDir, "src/assets/styles"));
 }
-export async function writeEslintConfig(targetDir, features) {
+export async function writeEslintConfig(targetDir, language, features) {
   if (!features.has("eslintAntfu")) return;
-  const withAutoImportGlobals = features.has("autoImport");
-  const autoImportLine = withAutoImportGlobals
-    ? `import autoImportGlobals from './.eslintrc-auto-import.json' with { type: 'json' }\n\n`
-    : "";
-  const autoImportConfig = withAutoImportGlobals
-    ? `,
-  {
-    languageOptions: {
-      globals: autoImportGlobals.globals
-    }
-  }`
-    : "";
+  if (
+    language === "js" &&
+    (features.has("vant") || features.has("elementPlus"))
+  )
+    await writeFileEnsureDir(
+      path.join(targetDir, ".eslintrc-auto-import.json"),
+      renderEslintAutoImportGlobalsJson(),
+    );
   await writeFileEnsureDir(
     path.join(targetDir, "eslint.config.js"),
-    `import antfu from '@antfu/eslint-config'
-${autoImportLine}export default antfu(
-  {
-    type: 'app',
-    ignores: [
-      'public',
-      'dist',
-      'node_modules'
-    ]
-  }${autoImportConfig}
-)
-`,
+    renderEslintConfig(language, features),
   );
 }
 export async function writeStylelintConfig(targetDir, features) {
   if (!features.has("stylelint")) return;
   await writeFileEnsureDir(
     path.join(targetDir, "stylelint.config.js"),
-    `export default {
-  extends: [
-    'stylelint-config-standard-scss',
-    'stylelint-config-standard-vue/scss',
-    'stylelint-config-recess-order',
-    '@stylistic/stylelint-config'
-  ],
-  plugins: [
-    'stylelint-scss'
-  ],
-  rules: {
-    'at-rule-no-unknown': null,
-    'no-descending-specificity': null,
-    'property-no-unknown': null,
-    'font-family-no-missing-generic-family-keyword': null,
-    'selector-class-pattern': null,
-    'function-no-unknown': [
-      true,
-      {
-        ignoreFunctions: [
-          'v-bind',
-          'map-get',
-          'lighten',
-          'darken'
-        ]
-      }
-    ],
-    'selector-pseudo-element-no-unknown': [
-      true,
-      {
-        ignorePseudoElements: [
-          '/^view-transition/'
-        ]
-      }
-    ],
-    'scss/double-slash-comment-empty-line-before': null,
-    'scss/no-global-function-names': null,
-    '@stylistic/max-line-length': null,
-    '@stylistic/block-closing-brace-newline-after': [
-      'always',
-      {
-        ignoreAtRules: [
-          'if',
-          'else'
-        ]
-      }
-    ]
-  },
-  allowEmptyInput: true,
-  ignoreFiles: [
-    'node_modules/**/*',
-    'dist*/**/*'
-  ]
-}
-`,
+    renderStylelintConfig(),
   );
 }
 export async function patchMainFile(mainPath, patched) {

package/dist/templates/index.js

@@ -3,11 +3,16 @@ export { renderAppWithRouter } from "./renderAppWithRouter.js";
 export { renderEditorConfig } from "./renderEditorConfig.js";
 export { renderEnv } from "./renderEnv.js";
 export { renderHomeView } from "./renderHomeView.js";
+export {
+  renderEslintAutoImportGlobalsJson,
+  renderEslintConfig,
+} from "./renderEslintConfig.js";
 export { renderJsConfig } from "./renderJsConfig.js";
 export { renderMainJs } from "./renderMainJs.js";
 export { renderPagesIndex } from "./renderPagesIndex.js";
 export { renderRouter } from "./renderRouter.js";
 export { renderStore } from "./renderStore.js";
+export { renderStylelintConfig } from "./renderStylelintConfig.js";
 export { renderUnoConfig } from "./renderUnoConfig.js";
 export {
   renderVsCodeExtensions,

package/dist/templates/renderEslintConfig.js

@@ -0,0 +1,174 @@
+export function renderEslintAutoImportGlobalsJson() {
+  return `{
+  "globals": {}
+}
+`;
+}
+export function shouldRenderEslintAutoImportGlobals(language, features) {
+  return (
+    language === "js" && (features.has("vant") || features.has("elementPlus"))
+  );
+}
+export function renderEslintConfig(language, features) {
+  const withAutoImportGlobals = shouldRenderEslintAutoImportGlobals(
+    language,
+    features,
+  );
+  const autoImportLine = withAutoImportGlobals
+    ? `import autoImportGlobals from './.eslintrc-auto-import.json' with { type: 'json' }\n\n`
+    : "\n";
+  const unocssLine = features.has("unocss") ? `    unocss: true,\n` : "";
+  const autoImportConfig = withAutoImportGlobals
+    ? `  {
+    languageOptions: {
+      globals: autoImportGlobals.globals
+    }
+  },
+`
+    : "";
+  return `import antfu from '@antfu/eslint-config'
+${autoImportLine}export default antfu(
+  {
+${unocssLine}    type: 'app',
+    ignores: [
+      'public',
+      'dist',
+      'node_modules'
+    ]
+  },
+${autoImportConfig}  {
+    rules: {
+      // 强制数组方法的回调函数中有 return 语句
+      'array-callback-return': 2,
+      // 强制在数组括号内使用一致的空格
+      'style/array-bracket-spacing': 0,
+      // 要求箭头函数的参数使用圆括号。'as-needed' 表示只有在必要时才使用圆括号
+      'style/arrow-parens': ['off', 'as-needed'],
+      // 要求箭头函数的箭头前后有空格
+      'style/arrow-spacing': [
+        'error',
+        {
+          before: true,
+          after: true
+        }
+      ],
+      // 强制在代码块中开括号前和闭括号后有空格
+      'style/block-spacing': ['error', 'always'],
+      // 强制在代码块中使用一致的大括号风格
+      'style/brace-style': ['error', '1tbs'],
+      // 禁止使用尾随逗号
+      'style/comma-dangle': [
+        'error',
+        {
+          arrays: 'never',
+          objects: 'never',
+          imports: 'never',
+          exports: 'never',
+          functions: 'never'
+        }
+      ],
+      // 强制在逗号前后使用一致的空格
+      'style/comma-spacing': [
+        'error',
+        {
+          before: false,
+          after: true
+        }
+      ],
+      // 禁止在计算的属性的方括号内使用空格
+      'style/computed-property-spacing': ['error', 'never'],
+      // 禁止在箭头函数体之前出现换行
+      'style/implicit-arrow-linebreak': ['error', 'beside'],
+      // 强制在对象字面量的属性中键和值之间使用一致的间距
+      'style/key-spacing': [
+        'error',
+        {
+          beforeColon: false,
+          afterColon: true
+        }
+      ],
+      // 强制在关键字前后使用一致的空格
+      'style/keyword-spacing': [
+        'error',
+        {
+          before: true,
+          after: true
+        }
+      ],
+      // 未声明的变量会被警告
+      'style/no-undef': 0,
+      // 强制使用一致的换行风格
+      'style/linebreak-style': 0,
+      // 禁用稀疏数组
+      'style/no-sparse-arrays': 0,
+      // 禁止数字字面量中使用前导和尾随小数点
+      'style/no-floating-decimal': 'error',
+      // 禁止使用多个空格
+      'style/no-multi-spaces': 'error',
+      // 禁止空格和 tab 的混合缩进
+      'style/no-mixed-spaces-and-tabs': 0,
+      // 禁止出现多行空行
+      'style/no-multiple-empty-lines': [
+        'warn',
+        {
+          max: 2,
+          maxEOF: 0
+        }
+      ],
+      // 强制在大括号中使用一致的空格
+      'style/object-curly-spacing': ['error', 'always'],
+      // 强制操作符周围有换行符
+      'style/operator-linebreak': ['error', 'after'],
+      // 要求对象字面量属性名称使用引号，只在需要的时候
+      'style/quote-props': ['error', 'as-needed'],
+      // 强制使用单引号
+      'style/quotes': ['error', 'single'],
+      // 禁止使用分号
+      'style/semi': ['error', 'never'],
+      // 强制在代码块前有空格
+      'style/space-before-blocks': ['error', 'always'],
+      // 要求操作符周围有空格
+      'style/space-infix-ops': 'error',
+      // 强制在 switch 的冒号左右有空格
+      'style/switch-colon-spacing': [
+        'error',
+        {
+          before: false,
+          after: true
+        }
+      ],
+      // 禁止直接使用 new
+      'no-new': 0,
+      // 禁止使用 var
+      'no-var': 2,
+      // 禁止存在debugger
+      'no-debugger': 1,
+      // 禁止存在console
+      'no-console': 1,
+      // 是否禁止存在无法到达的代码
+      'no-unreachable': 1,
+      // 禁止未使用过的变量
+      'no-unused-vars': 1,
+      // 要求模板字符串中花括号内有空格
+      'style/template-curly-spacing': ['error', 'always']
+    }
+  },
+  {
+    files: ['src/**/*.vue'],
+    rules: {
+      // 强制 .vue 文件中的顺序
+      'vue/block-order': [
+        'error',
+        {
+          order: ['route', 'template', 'script', 'style']
+        }
+      ],
+      // 是否可以直接修改prop
+      'vue/no-mutating-props': 0,
+      // 强制组件名称为多个单词
+      'vue/multi-word-component-names': 0
+    }
+  }
+)
+`;
+}

package/dist/templates/renderStylelintConfig.js

@@ -0,0 +1,54 @@
+export function renderStylelintConfig() {
+  return `export default {
+  extends: [
+    'stylelint-config-standard-scss',
+    'stylelint-config-standard-vue/scss',
+    'stylelint-config-recess-order',
+    '@stylistic/stylelint-config'
+  ],
+  plugins: [
+    'stylelint-scss'
+  ],
+  rules: {
+    'at-rule-no-unknown': null,
+    'no-descending-specificity': null,
+    'property-no-unknown': null,
+    'font-family-no-missing-generic-family-keyword': null,
+    'selector-class-pattern': null,
+    'function-no-unknown': [
+      true,
+      {
+        ignoreFunctions: [
+          'v-bind',
+          'map-get',
+          'lighten',
+          'darken'
+        ]
+      }
+    ],
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: [
+          '/^view-transition/'
+        ]
+      }
+    ],
+    'scss/double-slash-comment-empty-line-before': null,
+    'scss/no-global-function-names': null,
+    '@stylistic/max-line-length': null,
+    '@stylistic/block-closing-brace-newline-after': [
+      'always',
+      {
+        ignoreAtRules: ['if', 'else']
+      }
+    ]
+  },
+  allowEmptyInput: true,
+  ignoreFiles: [
+    'node_modules/**/*',
+    'dist*/**/*'
+  ]
+}
+`;
+}

package/dist/utils/constants.js

@@ -2,6 +2,7 @@ export const FEATURES_OPTIONS = [
   { value: "router", label: "Router (SPA 开发)" },
   { value: "pinia", label: "Pinia (状态管理)" },
   { value: "piniaPersist", label: "Pinia-plugin-persistedstate (状态持久化)" },
+  { value: "unocss", label: "UnoCSS (原子CSS引擎)" },
   { value: "sassEmbedded", label: "SassEmbedded" },
   { value: "eslintAntfu", label: "ESLint (Antfu风格)" },
   { value: "stylelint", label: "Stylelint" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackie_qian/create-vue-app",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "description": "",
   "main": "dist/index.js",