侧边栏壁纸
  • 累计撰写 198 篇文章
  • 累计创建 105 个标签
  • 累计收到 36 条评论
vue

vue3之UI组件库组件api自动引入——unplugin-vue-components

神兵小将
2022-04-16 / 0 评论 / 0 点赞 / 77 阅读 / 1,584 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

为什么使用 unplugin-vue-components

先看一个小例子:
以前,我们在开发中,使用组件需要如下:

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

现在只要在 src/components 下定义的组件都将会按需引入,即 是不需要引入和声明的,直接使用即可。

<!-- src/pages/index.vue -->
<script setup lang="ts">
	import Hello from '../components/Hello.vue'
</script>

<template>
	<Hello />
</template>

相比之下,是不是精简了很多,下面我们一起来看一下怎么使用吧。

安装

使用命令

pnpm add unplugin-vue-components -D

配置

vite.config.ts 中引入注册

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      extensions: ["vue", "md", "tsx"],//后缀扩展名
      include: [/\.md$/, /\.vue$/, /\.tsx$/],//用于转换目标的过滤器
      dts: resolve(__dirname, "../src/types/components.d.ts"),//指定类型文件
      resolvers: [ElementPlusResolver()],//解析器
    }),
  ],
})

image-1650113223541

UI组件库组件api引入

目前支持的组件库有:

Ant Design Vue
Arco Design Vue
Element Plus
Element UI
Headless UI
IDux
Inkline
Naive UI
Prime Vue
Vant
VEUI
Varlet UI
View UI
Vuetify
VueUse Components
Quasar
TDesign

安装依赖

pnpm add element-plus

配置

这里以 element-plus为例:

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import {
  ElementPlusResolver,
} from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [
    ElementPlusResolver(),
  ],
})

在模板中使用。

<!-- src/pages/index.vue -->
<template>
	<el-alert title="success alert" type="success" />
</template>

具体可见:
https://github.com/antfu/unplugin-vue-components

0

评论区