feat(tool): ✨ 添加微型代码生成器plop

可通过`npm run plop`生成指定类型代码，例如：视图代码 或 组件代码

package.json

@@ -15,6 +15,7 @@
     "format": "prettier --write src/",
     "test:unit": "vitest",
     "prepare": "husky",
+    "plop": "plop",
     "release": "standard-version"
   },
   "dependencies": {
@@ -69,6 +70,7 @@
     "less": "^4.2.0",
     "lint-staged": "^15.2.2",
     "npm-run-all2": "^6.1.2",
+    "plop": "^4.0.1",
     "postcss-html": "^1.6.0",
     "postcss-less": "^6.0.0",
     "prettier": "^3.2.5",

plop/component/component.hbs

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="{{ kebabName }}">{{ upperFirstName }}</div>
+</template>

plop/component/index.hbs

@@ -0,0 +1,3 @@
+import {{ upperFirstName }} from './src/{{ upperFirstName }}.vue'
+
+export { {{ upperFirstName }} }

plop/component/prompt.js

@@ -0,0 +1,50 @@
+const toUpperCase = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+
+export default {
+  description: '创建组件',
+  prompts: [
+    {
+      type: 'input',
+      name: 'name',
+      message: '请输入组件名称',
+      default: 'NewComponent',
+      validate: (value) => {
+        if (/^[A-Za-z]+$/.test(value)) {
+          return true
+        }
+        return '组件名称只能为英文字符'
+      }
+    }
+  ],
+  actions: (data) => {
+    const { name } = data
+    const upperFirstName = toUpperCase(name)
+    const kebabName = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+
+    const actions = []
+    if (name) {
+      actions.push(
+        {
+          type: 'add',
+          path: `./src/components/${upperFirstName}/src/${upperFirstName}.vue`,
+          templateFile: './plop/component/component.hbs',
+          data: {
+            name,
+            upperFirstName,
+            kebabName
+          }
+        },
+        {
+          type: 'add',
+          path: `./src/components/${upperFirstName}/index.ts`,
+          templateFile: './plop/component/index.hbs',
+          data: {
+            upperFirstName
+          }
+        }
+      )
+    }
+
+    return actions
+  }
+}

plop/view/prompt.js

@@ -0,0 +1,40 @@
+const toUpperCase = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+
+export default {
+  description: '创建视图',
+  prompts: [
+    {
+      type: 'input',
+      name: 'path',
+      message: '请输入路径',
+      default: 'views/NewView'
+    },
+    {
+      type: 'input',
+      name: 'name',
+      message: '请输入模块名称',
+      default: 'NewPage'
+    }
+  ],
+  actions: (data) => {
+    const { name, path } = data
+    const upperFirstName = toUpperCase(name)
+    const kebabName = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+
+    const actions = []
+    if (name) {
+      actions.push({
+        type: 'add',
+        path: `./src/${path}/${upperFirstName}.vue`,
+        templateFile: './plop/view/view.hbs',
+        data: {
+          name,
+          upperFirstName,
+          kebabName
+        }
+      })
+    }
+
+    return actions
+  }
+}

plop/view/view.hbs

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+</script>
+
+<template>
+  <ContentWrap class="{{ kebabName }}" title="{{ upperFirstName }}"> {{ name }} </ContentWrap>
+</template>

plopfile.js

@@ -0,0 +1,8 @@
+import viewGenerator from './plop/view/prompt.js'
+import componentGenerator from './plop/component/prompt.js'
+
+export default function (plop) {
+  plop.setWelcomeMessage('请选择代码生成器类型')
+  plop.setGenerator('view', viewGenerator)
+  plop.setGenerator('component', componentGenerator)
+}