这个提升效率宝藏级工具一定要收藏使用

ew-auto-import-tool (自动化按需导入工具)

简介

自动化按需导入工具是一个命令行工具，用于自动配置 Vue 项目中组件库的按需导入。它可以帮助你快速设置 Element Plus、Ant Design Vue 等组件库的按需导入，无需手动修改配置文件。

功能特点

• 依赖管理：自动检测并安装所需依赖

• Vite 配置修改：自动添加必要的 import 语句和插件配置

• TypeScript 支持：自动更新 tsconfig.json 文件

• 声明文件生成：自动生成组件和 API 的声明文件

安装

npm install -g ew-auto-import-tool

或者使用 npx 直接运行：

npx ew-auto-import-tool

使用方法

基本用法

在 Vue 项目根目录下运行：

ew-auto-import-tool

工具会引导你选择要配置的组件库，并自动完成配置。

命令行选项

ew-auto-import-tool --library element-plus

可用选项

• -l, --library <library>: 指定要配置的组件库 (element-plus, ant-design-vue, naive-ui, vant)

• -p, --path <path>: 指定项目路径，默认为当前目录

• -v, --version: 显示版本号

• -h, --help: 显示帮助信息

支持的组件库

• Element Plus
  

• Ant Design Vue
  

• Naive UI
  

• Vant
  

工作原理

1. 项目检测：检查是否为 Vue + Vite + TypeScript 项目

2. 依赖安装：安装 unplugin-auto-import、unplugin-vue-components 和组件库

3. 配置修改：更新 vite.config.ts 文件，添加自动导入插件

4. TypeScript 支持：更新 tsconfig.json，添加声明文件

5. 声明文件生成：生成 components.d.ts 和 auto-imports.d.ts 文件

示例

配置前：

<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>按钮</el-button>  <el-input placeholder="请输入内容" /></template>

配置后：

<script setup lang="ts">// 无需手动导入组件和样式</script>
<template>  <el-button>按钮</el-button>  <el-input placeholder="请输入内容" /></template>

来看一个如下截图的示例：

工具详细使用在线文档网站前往这里查看。

行业拓展

分享一个面向研发人群使用的前后端分离的低代码软件——JNPF。

基于 Java Boot/.Net Core 双引擎，它适配国产化，支持主流数据库和操作系统，提供五十几种高频预制组件，内置了常用的后台管理系统使用场景和实用模版，通过简单的拖拉拽操作，开发者能够高效完成软件开发，提高开发效率，减少代码编写工作。

JNPF 基于 SpringBoot+Vue.js，提供了一个适合所有水平用户的低代码学习平台，无论是有经验的开发者还是编程新手，都可以在这里找到适合自己的学习路径。

此外，JNPF 支持全源码交付，完全支持根据公司、项目需求、业务需求进行二次改造开发或内网部署，具备多角色门户、登录认证、组织管理、角色授权、表单设计、流程设计、页面配置、报表设计、门户配置、代码生成工具等开箱即用的在线服务。