perf: add plop

package.json

@@ -24,7 +24,7 @@
     "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
     "lint:pretty": "pretty-quick --staged",
     "postinstall": "husky install",
-    "plop": "plop"
+    "p": "plop"
   },
   "dependencies": {
     "@iconify/iconify": "^2.2.1",

plop/component/component.hbs

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('{{ name }}')
+</script>
+
+<template>
+  <div :class="`${prefixCls}-{{ name }}`">{{ 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,38 @@
+const toUpperCase = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+
+module.exports = {
+  description: 'Create vue component',
+  prompts: [
+    {
+      type: 'input',
+      name: 'name',
+      message: '请输入组件名称（Please enter the component name）'
+    }
+  ],
+  actions: (data) => {
+    const { name } = data
+    const upperFirstName = toUpperCase(name)
+
+    const actions = []
+    if (name) {
+      actions.push({
+        type: 'add',
+        path: `./src/components/${upperFirstName}/src/${upperFirstName}.vue`,
+        templateFile: './plop/component/component.hbs',
+        data: {
+          name,
+          upperFirstName
+        }
+      }, {
+        type: 'add',
+        path: `./src/components/${upperFirstName}/index.ts`,
+        templateFile: './plop/component/index.hbs',
+        data: {
+          upperFirstName
+        }
+      })
+    }
+
+    return actions
+  }
+}

plop/generator/newModule.js

@@ -1,38 +0,0 @@
-const PAGE_PATH = 'src/views/'
-
-const toUpperCase = (str) => str.charAt(0).toUpperCase() + str.slice(1)
-
-module.exports = {
-  description: 'Create a new Module',
-  prompts: [
-    {
-      type: 'input',
-      name: 'pagePath',
-      message: 'What is the path to the page?'
-    },
-    {
-      type: 'input',
-      name: 'moduleName',
-      message: 'What is the name of the module?'
-    }
-  ],
-  actions: (data) => {
-    const { pagePath, moduleName } = data
-    const upperFirstName = toUpperCase(moduleName)
-
-    const actions = []
-    if (moduleName) {
-      actions.push({
-        type: 'add',
-        path: `${PAGE_PATH}${pagePath}/${moduleName}/index.vue`,
-        templateFile: 'plop/template/newModule/index.hbs',
-        data: {
-          name: moduleName,
-          upperFirstName
-        }
-      })
-    }
-
-    return actions
-  }
-}

plop/template/newModule/index.hbs

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { ElButton } from 'element-plus'
-import { useI18n } from '@/hooks/web/useI18n'
-import { ref } from 'vue'
-
-defineOptions({
-  name: '{{ upperFirstName }}',
-  components: {
-    ElButton
-  },
-  setup() {}
-})
-const { t } = useI18n()
-</script>
-
-<template>
-  <ContentWrap>
-    <ElButton type="primary">{{ name }}</ElButton>
-  </ContentWrap>
-</template>

plop/view/prompt.js

@@ -0,0 +1,37 @@
+const toUpperCase = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+
+module.exports = {
+  description: 'Create vue view',
+  prompts: [
+    {
+      type: 'input',
+      name: 'path',
+      message: '请输入路径（Please enter a path）',
+      default: 'views'
+    },
+    {
+      type: 'input',
+      name: 'name',
+      message: '请输入模块名称（Please enter module name）'
+    }
+  ],
+  actions: (data) => {
+    const { name, path } = data
+    const upperFirstName = toUpperCase(name)
+
+    const actions = []
+    if (name) {
+      actions.push({
+        type: 'add',
+        path: `./src/${path}/${upperFirstName}.vue`,
+        templateFile: './plop/view/view.hbs',
+        data: {
+          name,
+          upperFirstName
+        }
+      })
+    }
+
+    return actions
+  }
+}

plop/view/view.hbs

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

plopfile.js

@@ -1,7 +1,7 @@
-const createNewModule = require('./plop/generator/newModule')
+const viewGenerator = require('./plop/view/prompt.js')
+const componentGenerator = require('./plop/component/prompt.js')
 
-function Cli(plop) {
+module.exports = function (plop) {
-  plop.setGenerator('newModule', createNewModule)
+  plop.setGenerator('view', viewGenerator)
+  plop.setGenerator('component', componentGenerator)
 }
-
-module.exports = Cli