盧偉冰長文解析K60至尊版 對Redmi有著里程碑式的意義
在今天的Redmi后性能時代戰略發布會結束之后，Redmi總經理盧偉冰又帶來了一篇長文，詳解了為什么 Redmi 要開啟后性能時代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
最近看到了一個插件unplugin-vue-components，很好奇，他的作用是什么呢？我借一個小例子給大家說明。
我們平時在使用ant-design-vue這類的UI組件庫的時候，為了最后打包體積能小一些，都會采用按需加載的方式：
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了：
<template> <a-button @click="handleClick">哈哈哈</a-button></template>
其實我們上面的例子，是手動按需加載，也就是，我們想用什么組件，就得注冊一遍，比如我想用這些組件，我就得一個一個去引用，去手動按需加載：
import { createApp } from "vue";import { Button, Input, Form, Select } from "ant-design-vue";import App from "./App.vue";const app = createApp(App);// 手動按需加載app.use(Button).use(Input).use(Form).use(Select);app.mount("#app");那怎么才能自動去按需加載呢？這時候unplugin-vue-components就出場了，他可以讓你不用自己去引入，去按需加載，而是當你用到了，他會自動幫你加載這一個組件~
就比如我在頁面里使用了 ant-design-vue 的 button 組件，我并沒有在去手動引入加載，我們需要安裝這個插件，并進行配置。
注意：ant-design-vue 的樣式使用的是 css-in-js，所以不需要按需引入樣式，但是 element-ui 就需要，因為 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");<template> <a-button @click="handleClick">哈哈哈</a-button></template>頁面會渲染出來。
類型提示當我們使用unplugin-vue-components后，構建之后，它會幫我們生成一個類型聲明文件 components.d.ts，確保我們使用組件的時候，能有類型的提示：
這個聲明文件也是按需生成的，比如我使用了：
他就會給我生成這三個組件的類型聲明：
想要用這個文件的類型聲明，我們需要在 tsconfig.ts 中配置一下：
我們先來看看，我們在不適用任何組件庫、插件的情況下，Vue 會把 a-button解析成一個什么東西：
可以看到會被解析成_resolveComponent("a-button")，這個_resolveComponent你可以理解為是一個解析組件的方法，它會從全局去找有沒有這個 a-button 全局組件，有的話就渲染出來。
當我們配置了unplugin-vue-components + AntDesignVueResolver之后，我們再看看構建后的代碼長什么樣子：
我們可以看到，_resolveComponent被替換成了引入的 button 組件了，也就是當我們使用了AntDesignVueResolver之后，它會去幫我們匹配出 _resolveComponent調用的a-開頭的組件，并尋找組件庫中對應的組件，去在構建的時候去自動引入，達到按需引入的效果~
每一個組件庫的匹配規則都是不一樣的，我們可以看到unplugin-vue-components支持了這么多組件庫呢~
本文鏈接：http://www.www897cc.com/showinfo-26-60971-0.html不引用組件庫，就能使用它！怎么做到的？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
下一篇： Swift 變量、常量和數據類型
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號