vue3?組件與API直接使用的方法詳解(無(wú)需import)
1. vue3 自動(dòng)導(dǎo)入
原理 ：
- 預(yù)加載前，該插件自動(dòng) 按需導(dǎo)入 了，在本vue文件中使用 api 和 組件
- 而 編寫(xiě)代碼 的時(shí)候，就無(wú)需 import 了
- 注意并不是全局導(dǎo)入，并不會(huì)影響到資源
2. API 的 自動(dòng)引入
Ⅰ、使用前后對(duì)比
使用插件前：
<script setup>
import { ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
const router = useRouter();
const name = ref('張三');
</script>
使用插件后：
<script setup>
const router = useRouter();
const name = ref('張三');
</script>
Ⅱ、安裝三方件
npm i -D unplugin-auto-import
Ⅲ、配置三方件
vite.config 配置：
import { defineConfig } from "vite";
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({ imports: ['vue', 'vue-router'] }),
]
//.........
})
不僅次于vue 和 路由，同時(shí)也可以在 imports 數(shù)組中加入其它的三方件
3. 組件的自動(dòng)引入
Ⅰ、使用前后對(duì)比
使用插件前：
<template>
<div class="main">
<Aside />
<Footer />
</div>
</template>
<script setup>
import Aside from '/@/components/Aside.vue'
import Footer from '/@/components/Footer.vue'
</script>
使用插件后：(可選擇按導(dǎo)入的文件夾)
<template>
<div class="main">
<Aside />
<Footer />
</div>
</template>
<script setup></script>
Ⅱ、安裝三方件
npm i -D unplugin-vue-components
既可以設(shè)置按需導(dǎo)入的組件，也可以設(shè)置 按需導(dǎo)入 UI框架 (如： element plus 、 Antd …)
Ⅲ、配置三方件
import { defineConfig } from "vite";
import Components from 'unplugin-vue-components/vite' // 按需加載自定義組件
import { ElementPlusResolver, AntDesignVueResolver} from 'unplugin-vue-components/resolvers'
export default defineConfig {
plugins: [
Components({
dts: true,
dirs: ['src/components'], // 按需加載的文件夾
resolvers: [
ElementPlusResolver(), // Antd 按需加載
AntDesignVueResolver() // ElementPlus按需加載
]
})
],
// ..................................
}dirs 屬性：設(shè)置自動(dòng)加載 組件的文件夾 ， 默認(rèn)為 ’ /src/component ' resolvers屬性 ：設(shè)置 UI 框架 自動(dòng)加載 ， 注意不要向 main.js 中 導(dǎo)入U(xiǎn)I 框架同時(shí)打包時(shí) ，用多少UI組件，打包多少。
到此這篇關(guān)于vue3 組件與API直接使用的方法(無(wú)需import)的文章就介紹到這了,更多相關(guān)vue3 組件與API使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了淺談一下Vue技術(shù)棧之生命周期,每一個(gè)vue實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，就是這個(gè)vue實(shí)例的生命周期,這些過(guò)程中會(huì)伴隨著一些函數(shù)的自調(diào)用,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue3.0中使用nextTick方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了滑動(dòng)穿透(鎖body)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)
這篇文章主要介紹了詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
解決VUE mounted 鉤子函數(shù)執(zhí)行時(shí) img 未加載導(dǎo)致頁(yè)面布局的問(wèn)題
這篇文章主要介紹了解決VUE mounted 鉤子函數(shù)執(zhí)行時(shí) img 未加載導(dǎo)致頁(yè)面布局的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue中通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法
這篇文章主要給大家介紹了在vue中如何通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法，文中有詳細(xì)的解決流程,需要的朋友可以參考下2023-06-06
對(duì)于vue來(lái)說(shuō)，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實(shí)例的作用域是相互獨(dú)立，這意味著不同組件之間的數(shù)據(jù)無(wú)法互相引用，一般來(lái)說(shuō)，組件之間可以有幾種關(guān)系，下面是我對(duì)組件之間消息傳遞的常用方式的總結(jié)2022-08-08
Vue實(shí)現(xiàn)騰訊云點(diǎn)播視頻上傳功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)騰訊云點(diǎn)播視頻上傳功能的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Windows系統(tǒng)下使用nginx部署vue2項(xiàng)目的全過(guò)程
nginx是一個(gè)高性能的HTTP和反向代理服務(wù)器,因此常用來(lái)做靜態(tài)資源服務(wù)器和后端的反向代理服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于Windows系統(tǒng)下使用nginx部署vue2項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-03-03