日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

最近看到了一個(gè)插件unplugin-vue-components，很好奇，他的作用是什么呢？我借一個(gè)小例子給大家說明。

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，先為雨山等服務(wù)建站，雨山等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為雨山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

我們平時(shí)在使用ant-design-vue這類的UI組件庫的時(shí)候，為了最后打包體積能小一些，都會(huì)采用按需加載的方式：

import { createApp } from "vue";
import { Button } from 'ant-design-vue'

import App from './App.vue'

const app = createApp(App)
// 按需加載
app.use(Button)

app.mount('#app')

接著我們就可以在頁面中去使用a-button了：

手動(dòng)按需加載

其實(shí)我們上面的例子，是手動(dòng)按需加載，也就是，我們想用什么組件，就得注冊(cè)一遍，比如我想用這些組件，我就得一個(gè)一個(gè)去引用，去手動(dòng)按需加載：

• Input
• Select
• Form

import { createApp } from "vue";
import { Button, Input, Form, Select } from "ant-design-vue";

import App from "./App.vue";

const app = createApp(App);
// 手動(dòng)按需加載
app.use(Button).use(Input).use(Form).use(Select);

app.mount("#app");

自動(dòng)按需加載

那怎么才能自動(dòng)去按需加載呢？這時(shí)候unplugin-vue-components就出場(chǎng)了，他可以讓你不用自己去引入，去按需加載，而是當(dāng)你用到了，他會(huì)自動(dòng)幫你加載這一個(gè)組件~

就比如我在頁面里使用了 ant-design-vue 的 button 組件，我并沒有在去手動(dòng)引入加載，我們需要安裝這個(gè)插件，并進(jìn)行配置。

注意：ant-design-vue 的樣式使用的是 css-in-js，所以不需要按需引入樣式，但是 element-ui 就需要，因?yàn)?element-ui 使用的是樣式文件去定義樣式：

// 安裝
pnpm i unplugin-vue-components

// vite.config.ts 配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    Components({
      // 生成類型聲明文件
      dts: true,
      resolvers: [
        AntDesignVueResolver({
          // 是否按需引入組件樣式
          importStyle: false,
        }),
      ],
    }),
  ],
});

import { createApp } from "vue";

import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

頁面會(huì)渲染出來。

類型提示

當(dāng)我們使用unplugin-vue-components后，構(gòu)建之后，它會(huì)幫我們生成一個(gè)類型聲明文件 components.d.ts，確保我們使用組件的時(shí)候，能有類型的提示：

這個(gè)聲明文件也是按需生成的，比如我使用了：

• Input
• Select
• Form

他就會(huì)給我生成這三個(gè)組件的類型聲明：

想要用這個(gè)文件的類型聲明，我們需要在 tsconfig.ts 中配置一下：

基本原理

我們先來看看，我們?cè)诓贿m用任何組件庫、插件的情況下，Vue 會(huì)把 a-button解析成一個(gè)什么東西：

可以看到會(huì)被解析成_resolveComponent("a-button")，這個(gè)_resolveComponent你可以理解為是一個(gè)解析組件的方法，它會(huì)從全局去找有沒有這個(gè) a-button 全局組件，有的話就渲染出來。

當(dāng)我們配置了unplugin-vue-components + AntDesignVueResolver之后，我們?cè)倏纯礃?gòu)建后的代碼長什么樣子：

我們可以看到，_resolveComponent被替換成了引入的 button 組件了，也就是當(dāng)我們使用了AntDesignVueResolver之后，它會(huì)去幫我們匹配出 _resolveComponent調(diào)用的a-開頭的組件，并尋找組件庫中對(duì)應(yīng)的組件，去在構(gòu)建的時(shí)候去自動(dòng)引入，達(dá)到按需引入的效果~

每一個(gè)組件庫的匹配規(guī)則都是不一樣的，我們可以看到unplugin-vue-components支持了這么多組件庫呢~

分享題目：不引用組件庫，就能使用它！怎么做到的？
分享鏈接：http://www.dlmjj.cn/article/dhiiihg.html