ljr-cli 1.0.0 → 1.0.1

package/lib/demo1.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+import { program } from "commander"
+import gradient from "gradient-string"
+import { readFileSync } from "fs"
+import { fileURLToPath } from "url"
+import path from "path"
+
+/** 渐变字符串 */
+const gradientString = (str, gradientColor = ["#42d392", "#647eff"]) => {
+  return gradient(gradientColor)(str)
+}
+
+console.log(
+  gradientString(`------------------------------- ljr-cli --------------------------------`, ["red", "yellow"]),
+)
+
+// 读取 package.json 里的 version（在 ESM 下安全做法）
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const pkg = JSON.parse(readFileSync(path.join(__dirname, "../package.json"), "utf-8"))
+const version = pkg.version
+
+program.version(version, "-v, --version", "查看版本号信息")
+
+program
+  .command("init <name>")
+  .description("demo1演示")
+  .option("-l, --local", "从本地模板创建目录")
+  .option("-g, --git", "从git地址创建目录")
+  .action((name, options) => {
+    console.log("参数name=====>", name)
+    console.log("选项options=====>", options)
+  })
+
+program.parse(process.argv)

package/lib/demo2.js

@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+
+import { program } from "commander"
+import gradient from "gradient-string"
+import * as prompts from "@clack/prompts"
+import { readFileSync } from "fs"
+import { fileURLToPath } from "url"
+import path from "path"
+
+/** 渐变字符串 */
+const gradientString = (str, gradientColor = ["#42d392", "#647eff"]) => {
+  return gradient(gradientColor)(str)
+}
+
+console.log(
+  gradientString(`------------------------------- ljr-cli --------------------------------`, ["red", "yellow"]),
+)
+
+// 读取 package.json 里的 version（在 ESM 下安全做法）
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const pkg = JSON.parse(readFileSync(path.join(__dirname, "../package.json"), "utf-8"))
+const version = pkg.version
+
+program.version(version, "-v, --version", "查看版本号信息")
+
+// 案例2
+program
+  .command("init")
+  .description("demo2演示")
+  .action(async () => {
+    prompts.intro(gradientString("创建项目"))
+
+    const group = await prompts.group(
+      {
+        name: () =>
+          prompts.text({
+            message: "请输入项目名称：",
+            placeholder: "项目名称",
+            validate: (value) => {
+              if (!value.trim().length) {
+                return "请输入项目名称"
+              }
+              if (/[^a-z-_]+/i.test(value)) {
+                return "英文开头或下划线开头，且只能包含英文、数字、下划线或中划线"
+              }
+            },
+          }),
+        template: () =>
+          prompts.select({
+            message: "请选择模板：",
+            options: [
+              { label: "vue3.x", value: "vue3.x", hint: "vue3项目" },
+              { label: "vue2.7.16", value: "vue2.7.16", hint: "vue2的最后一个版本" },
+            ],
+          }),
+        age: () => prompts.text({ message: "What is your age?" }),
+        shouldContinue: () =>
+          prompts.confirm({
+            message: "是否继续?",
+          }),
+        color: ({ results }) =>
+          prompts.multiselect({
+            message: `What is your favorite color ${results.name}?`,
+            options: [
+              { value: "red", label: "Red" },
+              { value: "green", label: "Green" },
+              { value: "blue", label: "Blue" },
+            ],
+          }),
+      },
+      {
+        onCancel: ({ results }) => {
+          prompts.cancel("取消操作！")
+          process.exit(0)
+        },
+      },
+    )
+
+    console.log("group=====>", group)
+
+    prompts.outro(gradientString("项目创建完成"))
+  })
+
+program.parse(process.argv)

package/lib/index.js

@@ -1,23 +1,192 @@
 #!/usr/bin/env node
-// 第一行固定写法，指定脚本的解释器路径（注意：第一行不要添加注释啥的，不然运行不起来）
 
-const { program } = require("commander")
+import { program } from "commander"
+import gradient from "gradient-string"
+import * as prompts from "@clack/prompts"
+import { readFileSync, existsSync } from "fs"
+import { copySync, emptyDirSync } from "fs-extra/esm"
+import { fileURLToPath } from "url"
+import path from "path"
+import { dateFormat } from "./utils/date.js"
+import download from "download-git-repo"
+import { replaceInFile } from "replace-in-file"
 
-// 获取包的版本
-const version = require("../package.json").version
+/** 渐变字符串 */
+const gradientString = (str, gradientColor = ["#42d392", "#647eff"]) => {
+  return gradient(gradientColor)(str)
+}
 
-program.version(version, "-v, --version")
+console.log(
+  gradientString(`------------------------------- ljr-cli --------------------------------`, ["red", "yellow"]),
+)
+program.hook("preAction", () => {
+  console.log(gradientString(`-------------------- 开始时间 - ${dateFormat()} --------------------`, ["red", "yellow"]))
+})
+program.hook("postAction", () => {
+  console.log(gradientString(`-------------------- 结束时间 - ${dateFormat()} --------------------`, ["red", "yellow"]))
+})
 
+// 读取 package.json 里的 version（在 ESM 下安全做法）
+// 当前运行文件的路径
+const __filename = fileURLToPath(import.meta.url)
+// 当前运行文件的文件夹
+const __dirname = path.dirname(__filename)
+const pkg = JSON.parse(readFileSync(path.join(__dirname, "../package.json"), "utf-8"))
+const version = pkg.version
+
+// 当前命令行的路径
+const cwdPath = process.cwd()
+
+program.version(version, "-v, --version", "查看版本号信息")
+
+function downloadTemplate(gitUrl, projectName) {
+  return new Promise((resolve, reject) => {
+    download(gitUrl, path.resolve(cwdPath, projectName), { clone: true }, function (err) {
+      if (err) {
+        return reject(err)
+      }
+      resolve()
+    })
+  })
+}
+
+// 初始化项目
 program
-  .command("init <name>") // 定义命令和参数
-  .description("创建项目") // 命令描述
-  .option("-l, --local", "从本地模板创建目录") // 定义选项
-  .option("-g, --git", "从git地址创建目录") // 定义选项
-  // 命令的回调函数
-  .action((name, options) => {
-    console.log("项目名=====>", name)
-    console.log("选项=====>", options)
+  .command("init")
+  .description("创建项目")
+  .action(async () => {
+    prompts.intro(gradientString("开始创建项目"))
+
+    const group = await prompts.group(
+      {
+        name: () =>
+          prompts.text({
+            message: "请输入项目名称：",
+            placeholder: "项目名称",
+            validate: (value) => {
+              if (!value.trim().length) {
+                return "请输入项目名称"
+              }
+              if (/[^a-z-_]+/i.test(value)) {
+                return "英文开头或下划线开头，且只能包含英文、数字、下划线或中划线"
+              }
+            },
+          }),
+        templateName: () =>
+          prompts.select({
+            message: "请选择模板：",
+            options: [
+              { label: "vue3.5.25-2025.12.4", value: "vue3.5.25-2025.12.4", hint: "2025.12.4创建的" },
+              { label: "vue2.7.16", value: "vue2.7.16", hint: "vue2项目，这是vue2的最后一个版本" },
+              { label: "react", value: "react", hint: "react项目" },
+              { label: "qiankun", value: "qiankun", hint: "微前端-乾坤版本" },
+              { label: "monorepo", value: "monorepo", hint: "monorepo架构-单仓库多项目" },
+              { label: "node", value: "node", hint: "node服务" },
+              { label: "java", value: "java", hint: "java服务" },
+              { label: "mysql", value: "mysql", hint: "mysql数据库" },
+              { label: "wx-miniapp", value: "wx-miniapp", hint: "微信原生小程序" },
+              { label: "uni-app", value: "uni-app", hint: "uni-app项目" },
+              { label: "flutter", value: "flutter", hint: "flutter项目" },
+            ],
+          }),
+        source: () =>
+          prompts.select({
+            message: "请选择来源：",
+            options: [
+              { label: "本地", value: "local", hint: "从本地模板创建" },
+              {
+                label: "git仓库",
+                value: "git",
+                hint: "从git地址创建，这里为了演示，只是随便用了个git仓库，并不是真正的模版仓库",
+              },
+            ],
+          }),
+      },
+      {
+        onCancel: ({ results }) => {
+          prompts.cancel("取消操作！")
+          process.exit(0)
+        },
+      },
+    )
+
+    const s = prompts.spinner({ indicator: "timer" })
+
+    // 判断文件夹是否存在，存在询问是否清空
+    if (existsSync(group.name)) {
+      const confirm = await prompts.confirm({
+        message: gradientString("文件夹已存在，是否清空？", ["red", "red"]),
+      })
+      if (confirm) {
+        emptyDirSync(group.name)
+      } else {
+        prompts.cancel("取消操作！")
+        process.exit(0)
+      }
+    } else {
+      emptyDirSync(group.name)
+    }
+
+    s.start("创建文件夹...")
+    s.stop("文件夹操作完成！")
+
+    s.start("写入模版中...")
+    try {
+      if (group.source === "local") {
+        // 源路径
+        const srcPath = path.join(__dirname, "/templates/", group.templateName)
+        // 目标路径
+        const destPath = `./${group.name}`
+
+        copySync(srcPath, destPath, {
+          recursive: true,
+          filter: (src) => {
+            // 相对于模板根的相对路径
+            const rel = path.relative(srcPath, src)
+            // 根目录本身允许
+            if (!rel) return true
+            const parts = rel.split(path.sep)
+            // 如果路径中包含 node_modules 或 dist 则过滤掉
+            if (parts.includes("node_modules") || parts.includes("dist") || parts.includes(".eslintcache")) {
+              return false
+            }
+            return true
+          },
+        })
+      }
+
+      if (group.source === "git") {
+        await downloadTemplate("direct:https://gitee.com/ljr-395181403/git-test.git#master", group.name)
+      }
+    } catch (error) {
+      console.log("error=====>", error)
+      prompts.cancel("模版写入失败！")
+      process.exit(0)
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 2000)) // 为了更好的演示效果，强制等待
+    s.stop("模版写入完成！")
+
+    // 判断package.json是否存在
+    if (existsSync(path.join(cwdPath, group.name, "package.json"))) {
+      s.start("项目名操作...")
+      try {
+        const pkgFile = path.join(cwdPath, group.name, "package.json")
+        await replaceInFile({
+          files: pkgFile,
+          from: /("name"\s*:\s*)".*?"/,
+          to: `$1"${group.name}"`,
+        })
+      } catch (err) {
+        console.error("替换 package.json name 失败：", err)
+        prompts.cancel("项目名修改失败")
+        process.exit(1)
+      }
+      await new Promise((resolve) => setTimeout(resolve, 1000)) // 为了更好的演示效果，强制等待
+      s.stop("项目名操作完成！")
+    }
+
+    prompts.outro(gradientString("项目创建完成！ 🎉"))
   })
 
-// 让commander解析process.argv的参数
 program.parse(process.argv)

package/lib/templates/vue2.7.16/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

package/lib/templates/vue2.7.16/.env

@@ -0,0 +1,4 @@
+# 公用的环境变量
+VUE_APP_LAYOUT = 'layout'
+
+

package/lib/templates/vue2.7.16/.env.development

@@ -0,0 +1,7 @@
+# 开发环境的环境变量
+
+# NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置，如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。
+ENV = 'development'
+
+# 上下文
+VUE_APP_BASE_API = '/dev-api'

package/lib/templates/vue2.7.16/.env.production

@@ -0,0 +1,7 @@
+# 生产环境的环境变量
+
+# NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置，如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。
+ENV = 'production'
+
+# 上下文
+VUE_APP_BASE_API = '/api'

package/lib/templates/vue2.7.16/.eslintignore

@@ -0,0 +1,3 @@
+
+/node_modules
+public/index.html

package/lib/templates/vue2.7.16/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ["plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended"],
+  parserOptions: {
+    parser: "@babel/eslint-parser",
+  },
+  rules: {
+    semi: ["error", "never"], // 不允许将分号作为语句的结尾
+    indent: ["error", 2, { SwitchCase: 1 }], // 强制执行一致的缩进风格
+    quotes: ["error", "double", { avoidEscape: true, allowTemplateLiterals: true }], // 使用双引号
+    "no-unused-vars": ["off", { vars: "all", args: "none" }], // 有没有未使用的变量
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", // console是否要警告
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", // debugger是否要警告
+    "spaced-comment": ["error", "always", { markers: ["/"] }], // 注释 // 或 /* 开始后的间距的一致性
+    "vue/multi-word-component-names": "off", // 组件名是否多单词
+    "vue/attributes-order": "error", // vue属性排序
+  },
+}

package/lib/templates/vue2.7.16/.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  $schema: "https://json.schemastore.org/prettierrc",
+  printWidth: 120, // 一行的字符数，如果超过会进行换行，默认为80
+  semi: false, // 句尾是否添加分号
+  tabWidth: 2, // 一个tab代表几个空格数，默认为2
+  useTabs: false, // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
+  singleQuote: false, // 字符串是否使用单引号，默认为false，使用双引号
+  trailingComma: "all", // 是否使用尾逗号，有三个可选值"<none|es5|all>"
+  bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
+  endOfLine: "auto", // 避免报错delete (cr)的错
+}

package/lib/templates/vue2.7.16/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "eslint.validate": ["javascript", "html", "vue"], // eslint指定要执行验证的文件
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit" // 显示保存时执行eslint程序
+  },
+  "editor.formatOnPaste": false, // 粘贴时自动格式化
+  "editor.formatOnSave": true, // 保存时自动格式化
+  "editor.formatOnType": false, // 控制编辑器在键入一行后，是否自动格式化该行
+  "editor.defaultFormatter": "esbenp.prettier-vscode" // 默认格式化程序
+}

package/lib/templates/vue2.7.16/README.md

@@ -0,0 +1,55 @@
+# vue2.7.16 模版
+
+此项目使用 vue-cli 搭建的 vue2.7.16 的最新版本，此版本应该是 vue2 最后一个版本了
+引入 l-global 包，包括 variable.css、base.css、global.css 和 utils 工具类
+引入 element-ui
+做了登录页，404 页
+做了通过路由配置生成左侧菜单
+使用 vuex-persist 插件做 vuex 持久化
+封装了全局登录判断的路由卫士
+eslint + prettier
+axios 封装
+封装自定义指令
+封装自动注册全局组件
+封装函数式弹窗
+封装 store 的数据字典
+原型扩展
+收集一些模版
+收集一些遇到的问题
+收集一些动画
+列表的模版，顶部搜索，中间表格，底下分页，新建编辑弹窗，删除二次确认模版
+
+## 项目初始化
+
+```
+npm install
+```
+
+### 项目运行
+
+```
+npm run dev || npm run serve
+```
+
+### 项目打包
+
+```
+npm run build
+```
+
+### 检查和修复文件
+
+```
+npm run lint
+```
+
+### 命名规范
+
+| 类别               | 推荐命名方式                                    | 示例              | 关键点/例外情况        |
+| ------------------ | ----------------------------------------------- | ----------------- | ---------------------- |
+| 通用               | kebab-case                                      | package-lock.json | 没有特别说明尽量用这个 |
+| 变量               | camelCase                                       | userProfile       |                        |
+| 路由名称           | camelCase 或者 PascalCase                       | userProfile       |                        |
+| App.vue            | PascalCase                                      |                   |                        |
+| Vue 组件里的组件名 | PascalCase                                      |                   |                        |
+| Vue 组件里的 Props | 在声明时使用 camelCase，在模板中使用 kebab-case |                   |                        |

package/lib/templates/vue2.7.16/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+}

package/lib/templates/vue2.7.16/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}