Boost Vue Development Speed with mkfolder: One-Click Module Generator

Introduction

As a frontend developer, you may have experienced repeatedly copying templates, renaming files, and adjusting component structures for each new module, or dealing with inconsistent Vue file styles across a team. This guide presents mkfolder , a CLI utility that automates these tasks.

Key Features

Generate Vue pages and components with a single configuration file.

Support for multiple template types: Vue2, Vue3, script setup, and custom paths.

Automatic creation of nested directory structures.

Unified project style to improve team collaboration.

Scenario 1: Batch Create Modules with One Command

You can define modules a, b, c, d and their files (e.g., index.vue, edit.vue, components) in a JSON config:

{
  "a": {
    "index.vue": { "field": {}, "template": "v2" },
    "edit.vue": { "field": {}, "template": "v2" }
  },
  "b": {
    "index.vue": { "field": {}, "template": "v2" },
    "edit.vue": { "field": {}, "template": "v2" }
  },
  "c": {
    "index.vue": { "field": {}, "template": "v2" },
    "edit.vue": { "field": {}, "template": "v2" },
    "info.vue": { "field": {}, "template": "v2" }
  },
  "d": {
    "components": {
      "tool.vue": { "field": {}, "template": "v2" }
    },
    "index.vue": { "field": {}, "template": "v2" }
  }
}

Run the command: mk generate -c config.json -o src/views The directory structure is created instantly.

Scenario 2: Enforce Consistent Code Style with Templates

Specify a template path in the config to ensure every generated file follows the same style, regardless of whether the team prefers <script setup> or Vue2 Options API:

{
  "user": {
    "index.vue": {
      "field": {},
      "template": "/templates/vue3sTemp.vue"
    }
  }
}

All files use the designated template, eliminating style discrepancies during code review.

Scenario 3: Rapid MVP Prototyping

For tight deadlines or internal incubations, mkfolder can generate dozens of page structures in minutes, letting you focus on core business logic.

Scenario 4: Full EJS Template Support

mkfolder integrates a complete EJS engine, enabling dynamic content, conditional logic, loops, and reusable templates across projects. Example EJS template ( templates/vue3sTemp.vue.ejs) and corresponding config are provided, producing a functional Vue component with a data table and edit/delete actions.

Creating a Custom EJS Template

Create a /templates folder in the project root.

Add files with the .ejs extension.

Reference the template using an absolute path in the configuration.

Installation and Basic Usage

npm install -g mkfolder

After installation, run mk --help to see available commands:

Usage: mk [options] [command]

Commands:
  module      Interactive module creation (supports different templates and Chinese content)
  generate    Generate module structure from a config file (.js/.json)

Options:
  -V, --version  Output version number
  -h, --help     Show help information

Command Details

1. Interactive Module Creation

Use mk module to create modules interactively. Example: mk module -n user,order Parameters:

Parameter

Meaning -n, --name Module names, comma‑separated --files List of file names to generate (default: index) -o, --output Output directory (default: ./dist)

During the interactive flow you choose a template type (Vue2, Vue3, script setup, or custom path) and provide Chinese descriptions that replace placeholders like #name and #content in the template.

2. Configuration‑File Generation

Run mk generate with a config file to batch‑create multiple modules: mk generate -c config.json -o src/modules Supported template types include built‑in identifiers (e.g., "v2"), absolute paths, and relative paths.

Example Output Structure

src/modules/
├── user/
│   ├── index.vue
│   ├── edit.vue
│   └── detail.vue
└── order/
    ├── index.vue
    ├── edit.vue
    └── detail.vue

Each .vue file is populated according to the selected template.

Embedding mkfolder into Project Scripts

Create scripts/mk-page.js to invoke the CLI from Node, then add an npm script:

{
  "scripts": {
    "mk:page": "node scripts/mk-page.js"
  }
}

Run with npm run mk:page UserPage to generate a new page.

Why Use mkfolder?

Interactive module creation with per‑file template selection.

Configuration‑driven batch generation for clear, reusable structures.

Multiple template options, including custom EJS templates.

Nested directory generation for complex module hierarchies.

Colorful log prompts for better user experience.

The tool is open‑source on GitHub; contributions via forks, pull requests, and issues are welcome.