unplugin-vue-components是一个用于Vue.js项目的插件,特别适用于Vite和Webpack构建工具。它的主要功能是自动导入Vue组件,从而减少了在每个文件中手动导入组件的需要。
npm install unplugin-vue-components -D
# 或者使用 yarn
yarn add unplugin-vue-components -D
在你的Vite配置文件(通常是vite.config.js或vite.config.ts)中添加对应的配置。在Components中添加你想要自动导入的相关库或者本地的vue文件。
import Vue from '@vitejs/plugin-vue' import Components from 'unplugin-vue-components/vite' import { VantResolver } from 'unplugin-vue-components/resolvers' export default { plugins: [ Vue(), Components({ resolvers: [VantResolver()], // 本地希望自动导入的vue文件的代码位置 dirs: ['src/views'], }), // ...其他插件 ], // ...其他 Vite 配置 }
如果项目是TypeScript项目,更新tsconfig.json以包含自动生成的类型声明文件:
{
"include": [
"components.d.ts",
],
}
<template>
<navBar ></navBar>
<Tabbar ></Tabbar>
</template>
<script setup lang="ts">
</script>
至此在在项目中配置unplugin-vue-components插件,自动引入组件库就完成。快去体验吧。
1、项目中不要出现相同名称的vue组件,要不自动导入的时候会默认只加载第一个,后面的会忽略;
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。