DEV Community

Cover image for This treasure-level tool for improving efficiency must be collected and used
夕水
夕水

Posted on

This treasure-level tool for improving efficiency must be collected and used

#webdev #javascript

Auto Import Tool

Introduction

The Auto Import Tool is a CLI utility that automatically configures on-demand imports for component libraries in Vue projects. It helps quickly set up popular component libraries like Element Plus, Ant Design Vue, etc., without manual configuration file modifications.

Features

  • Dependency Management: Automatically detects and installs required dependencies
  • Vite Configuration: Automatically adds necessary import statements and plugin configurations
  • TypeScript Support: Updates tsconfig.json file automatically
  • Declaration Files: Generates component and API declaration files

Installation 

npm install -g ew-auto-import-tool
Enter fullscreen mode Exit fullscreen mode

Or run directly using npx:

npx ew-auto-import-tool
Enter fullscreen mode Exit fullscreen mode

Usage

Basic Usage

Run in Vue project root:

ew-auto-import-tool
Enter fullscreen mode Exit fullscreen mode

The tool will guide you to select component libraries and complete configuration automatically.

CLI Options 

ew-auto-import-tool --library element-plus
Enter fullscreen mode Exit fullscreen mode

Available Options

  • -l, --library <library>: Specify component library (element-plus, ant-design-vue, naive-ui, vant)
  • -p, --path <path>: Specify project path (default: current directory)
  • -v, --version: Show version
  • -h, --help: Display help

Supported Libraries

Implementation

  1. Project Detection: Verifies Vue + Vite + TypeScript project setup
  2. Dependency Installation: Installs unplugin-auto-import, unplugin-vue-components and component libraries
  3. Configuration Update: Modifies vite.config.ts with auto-import plugins
  4. TypeScript Support: Updates tsconfig.json declaration file references
  5. File Generation: Creates components.d.ts and auto-imports.d.ts

Example

Before configuration:

<script setup lang="ts">
import { ElButton, ElInput } from "element-plus";
import "element-plus/es/components/button/style/css";
import "element-plus/es/components/input/style/css";
</script>

<template>
  <el-button>Button</el-button>
  <el-input placeholder="Input content" />
</template>
Enter fullscreen mode Exit fullscreen mode

After configuration:

<script setup lang="ts">
// No manual imports needed
</script>

<template>
  <el-button>Button</el-button>
  <el-input placeholder="Input content" />
</template>
Enter fullscreen mode Exit fullscreen mode

Let’s take a look at an example screenshot:

Image description

You can see an example here.Source code is here.

Top comments (0)