unplugin-vue-components为主流的UI组件库提供了内置的支持,通过使用对应 UI 组件库的解析器(resolvers),就能自动引入对应的组件库组件及样式。 解析器可以是一个函数或者是对象 以对象为例: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 {type:'component',resolve:(name:string)=>{constmap={'Abutton'...
不过JSX 则需要配合 unplugin-auto-import(用于自动引入变量) 在Vite 中 CSS 无法 tree shaking,不过这个是 Vite 的问题。但 JS 仍然是可以 tree shaking,相对于全局注册组件,对构建产物体积的优化还是非常可观的 总结 使用unplugin-vue-components 可以非常方便地实现按需引入组件的功能,从而减小项目体积、加快项目...
unplugin-vue-components是一款功能强大的Vue插件,旨在简化Vue组件的自动导入和使用。它能够在Vue模板中自动识别并导入所需的组件,无需手动编写import语句。此外,它还支持按需加载组件,只导入实际使用的组件,从而减少打包体积。该插件还支持多种流行的Vue组件库,如Element Plus、Ant Design Vue等,并允许开发者进行自...
而unplugin-vue-components可以不需要手动引入组件,能够让开发者就像全局组件那样进行开发,但实际上又是按需引入,且不限制打包工具,不需要使用babel 使用效果 以Antd Vue和vite为例: import AutoImport from 'unplugin-auto-import/vite';import Components from 'unplugin-vue-components/vite';import { AntDesignVue...
一、unplugin-vue-components 插件 unplugin-vue-components 插件可以在Vue文件中自动引入组件(包括项目自身的组件和各种组件库中的组件)作者是Vite生态圈大名鼎鼎的Anthony Fu。使用此插件后,不需要手动编写import { Button } from 'ant-design-vue'这样的代码了,插件会自动识别template中使用的自定义组件并自动注册。
以 Antd Vue 和 Vite 为例，unplugin-vue-components 能够自动引入 Antd Vue 组件，无需手动导入组件与样式，使用体验与全局组件类似。实现这一功能的关键在于 Vue 编译过程中的代码修改。unplugin-vue-components 通过正则匹配 Vue 的全局组件，调用解析器进行组件引入，并替换原有的全局组件引用，实现了...
import vueJsx from "@vitejs/plugin-vue-jsx"; import vueDevTools from "vite-plugin-vue-devtools"; import AutoImport from "unplugin-auto-import/vite"; import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' ...
首先,我们需要创建一个新的Vue项目,这个示例中我们使用Vite(node版本^18.0.0 || >=20.0.0)来创建: yarn create vite my-vue-app --template vue 创建完成后启动项目: cd my-vue-app yarn yarn dev 我们现在快速创建了一个最基础的Vue项目。 4. 引入unplugin-vue-components ...
Components({ dirs: ['src/components'], // 目标文件夹 extensions: ['vue','jsx'], // 文件类型 dts: 'src/components.d.ts', // 输出文件,里面都是一些import的组件键值对 // ui库解析器,也可以自定义,需要安装相关UI库 resolvers: [
import{defineFatForm}from'@wakeadmin/components'import{ElMessageBox}from'element-plus'exportdefaultdefineFatForm<{// 🔴 这里的泛型变量可以定义表单数据结构name:stringnickName:string}>(({item,form,consumer,group})=>{// 🔴 这里可以放置 Vue Hooks// 返回表单定义return()=>({// FatForm props 定...