背景

当我为每个Vue项目使用ui组件库的时候，都会使用按需导入的方式来使用ui组件库。但是每次按需导入，不可避免的就需要做以下三步。我们以element plus ui组件库为例。

1. 安装依赖

第一步，当然是需要安装依赖。命令如下:

pnpm add unplugin-vue-components unplugin-auto-import // npm和yarn同理

2. 添加vite配置

第二步，就是往vite的配置里面添加配置，如下所示:

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

3. 修改ts配置

第三步，就是写入ts的配置，如下所示:

{"include": ["components.d.ts", "auto-imports.d.ts"]
}

虽然说这三步实际也花费不了多少时间，但是每个项目都这么做，那不是太费时间了吗？这个工具的出现就是为了解决这个问题。

有了这个工具，我们只需要一个命令就可以完成以上三个步骤。如下所示:

// 当然前提需要安装这个工具
ew-auto-import-tool --library element-plus

rust版本的出现

在这之前，我也将这个工具发布了一个npm包，并且也写了一篇介绍使用文章。

这个版本的工具源码是使用typescript编写的，为了提升性能和加快编译效率，我特意又花时间完成了rust版本。

让我们一起来看看rust版本是如何使用这个工具更高效的完成按需导入的自动化吧。

编写一个sh脚本，代码如下所示:

#!/bin/bash# 颜色定义
GREEN="\033[0;32m"
BLUE="\033[0;34m"
YELLOW="\033[0;33m"
RED="\033[0;31m"
NC="\033[0m" # No Color# 打印带颜色的消息
function print_message() {echo -e "${BLUE}===> ${1}${NC}"
}# 检查命令是否存在
function check_command() {if ! command -v $1 &> /dev/null; thenecho -e "${RED}错误: $1 未安装，请先安装它。${NC}"exit 1fi
}# 检查必要的命令
check_command "cargo"
check_command "npm"# 设置工作目录
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
RUST_DIR="$(dirname "$SCRIPT_DIR")"
EXAMPLE_PROJECT="my-vue-app"
EXAMPLE_DIR="$SCRIPT_DIR/$EXAMPLE_PROJECT"print_message "开始运行 Auto Import Tool 示例"# 编译 Rust 工具
print_message "编译 Rust 工具"
cd "$RUST_DIR"
cargo build --release
if [ $? -ne 0 ]; thenecho -e "${RED}编译失败，请检查错误信息。${NC}"exit 1
fi
echo -e "${GREEN}编译成功!${NC}"# 创建示例 Vue 项目
print_message "创建示例 Vue 项目"
cd "$SCRIPT_DIR"# 如果项目已存在，询问是否删除
if [ -d "$EXAMPLE_PROJECT" ]; thenecho -e "${YELLOW}警告: $EXAMPLE_PROJECT 目录已存在。${NC}"read -p "是否删除并重新创建? (y/n) " -n 1 -rechoif [[ $REPLY =~ ^[Yy]$ ]]; thenrm -rf "$EXAMPLE_PROJECT"elseecho -e "${YELLOW}使用现有项目继续。${NC}"fi
fi# 如果项目不存在，创建新项目
if [ ! -d "$EXAMPLE_PROJECT" ]; thenecho -e "${GREEN}创建新的 Vue + TypeScript 项目...${NC}"npm create vite@latest $EXAMPLE_PROJECT -- --template vue-tscd "$EXAMPLE_PROJECT"npm install
elsecd "$EXAMPLE_PROJECT"
fi# 运行 Auto Import Tool
print_message "运行 Auto Import Tool 配置 Element Plus"
TOOL_PATH="$RUST_DIR/target/release/ew-auto-import-tool"echo -e "${YELLOW}选择运行模式:${NC}"
echo "1) 自动模式 (使用 Element Plus)"
echo "2) 交互模式 (手动选择组件库)"
read -p "请选择 (1/2): " -n 1 -r
echoif [[ $REPLY =~ ^[1]$ ]]; then"$TOOL_PATH" --library element-plus --path "$EXAMPLE_DIR"
else"$TOOL_PATH" --path "$EXAMPLE_DIR"
fi# 创建示例组件
if [ $? -eq 0 ]; thenprint_message "创建示例组件以验证配置"# 创建一个使用组件库的示例组件cat > "$EXAMPLE_DIR/src/App.vue" << EOL
<template><div class="container"><h1>Element Plus 自动导入示例</h1><div class="card"><el-form><el-form-item label="用户名"><el-input v-model="username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="password" type="password" placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-button type="primary" @click="handleSubmit">登录</el-button><el-button>取消</el-button></el-form-item></el-form></div></div>
</template><script setup lang="ts">
import { ref } from 'vue'const username = ref('')
const password = ref('')const handleSubmit = () => {if (!username.value || !password.value) {ElMessage.warning('请输入用户名和密码')return}ElMessage.success('登录成功!')
}
</script><style>
.container {max-width: 800px;margin: 0 auto;padding: 20px;
}.card {padding: 20px;border-radius: 8px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
EOLprint_message "示例创建完成"echo -e "${GREEN}现在你可以运行项目来测试自动导入功能:${NC}"echo -e "cd $EXAMPLE_PROJECT && npm run dev"
fiprint_message "示例运行完成"

整个脚本代码的核心就是使用cargo build --release命令编译出工具的可执行文件，然后初始化一个vue项目并执行该可执行文件，这样就完成了一个示例。

使用步骤

前提条件

• 已安装 Rust 和 Cargo
• 已编译 Auto Import Tool 的 Rust 版本

使用方法

1. 编译工具

在 rust 目录下运行以下命令编译工具：

cargo build --release

编译后的可执行文件将位于 target/release 目录下。

2. 创建一个 Vue 项目

使用 Vite 创建一个新的 Vue 项目：

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install

3. 使用工具配置组件库

运行编译后的工具，并指定要配置的组件库和项目路径：

# 使用相对路径运行工具
../target/release/ew-auto-import-tool --library element-plus --path ./my-vue-app

或者使用交互式方式：

../target/release/ew-auto-import-tool --path ./my-vue-app

然后按照提示选择要配置的组件库。

如果觉得本工具有用，感谢大家使用，点赞收藏不迷路，点个小star吧，工具源码地址在这里。

感兴趣的可以看看源码，后期我再写文章详细讲解源码的实现，今天就到此为止，谢谢大家阅读。