vue3?api自動(dòng)導(dǎo)入神器推薦
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組件，打包多少。
總結(jié)
到此這篇關(guān)于vue3 api自動(dòng)導(dǎo)入的文章就介紹到這了,更多相關(guān)vue3 api自動(dòng)導(dǎo)入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
由于涉及到vue框架單網(wǎng)頁(yè)應(yīng)用首屏加載慢這個(gè)問(wèn)題,我們需盡量減少加載負(fù)擔(dān),故采用按需引入的方式,只引入項(xiàng)目中用到的組件,這篇文章主要給大家介紹了關(guān)于Vue3按需引入Element?Plus以及定制主題色的相關(guān)資料,需要的朋友可以參考下2023-06-06
一篇文章告訴你Vue3指令是如何實(shí)現(xiàn)的
在計(jì)算機(jī)技術(shù)中,指令是由指令集架構(gòu)定義的單個(gè)的CPU操作,在更廣泛的意義上,“指令”可以是任何可執(zhí)行程序的元素的表述,例如字節(jié)碼,下面這篇文章主要給大家介紹了關(guān)于Vue3指令是如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue與django(drf)實(shí)現(xiàn)文件上傳下載功能全過(guò)程
最近簡(jiǎn)單的學(xué)習(xí)了django和drf上傳文件(主要是圖片),做一個(gè)記錄,下面這篇文章主要給大家介紹了關(guān)于vue與django(drf)實(shí)現(xiàn)文件上傳下載功能的相關(guān)資料,需要的朋友可以參考下2023-02-02
Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法
這篇文章主要介紹了Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)
這篇文章主要介紹了vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue樣式穿透 ::v-deep的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vue父組件異步獲取數(shù)據(jù)傳給子組件,需要的朋友可以參考下2018-07-07
vue基于兩個(gè)計(jì)算屬性實(shí)現(xiàn)選中和全選功能示例
這篇文章主要介紹了vue基于兩個(gè)計(jì)算屬性實(shí)現(xiàn)選中和全選功能,結(jié)合實(shí)例形式分析了vue計(jì)算屬性get及set操作頁(yè)面元素實(shí)現(xiàn)選中與全選功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
記一次vue去除#問(wèn)題處理經(jīng)過(guò)小結(jié)
這篇文章主要介紹了vue去除#問(wèn)題處理經(jīng)過(guò)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03