IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

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

    夕水发表于 2025-05-08 16:15:01
    love 0

    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>

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

    你前往这里可以查看示例。

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

    最后

    如果觉的这个工具有用,希望不要吝啬点赞收藏哦,工具源码在这里。

    ps: 本文档由tare编写,然后本人改了一些。


沪ICP备19023445号-2号
友情链接