vue3中unplugin-auto-import自動(dòng)引入示例代碼
vue3日常項(xiàng)目中定義變量需要引入ref,reactive等等比較麻煩，可以通過(guò)unplugin-auto-import給我們自動(dòng)引入
1、安裝
npm i -D unplugin-auto-import
2、在vite.config.ts中引入
import AutoImport from 'unplugin-auto-import/vite'
并在plugins中配置：
export default defineConfig({
plugins: [
......
AutoImport({
imports: ['vue'],
dts: 'src/auto-import.d.ts',
})
]
}）AutoImport中可以有很多配置項(xiàng)，可以到github中看詳細(xì)配置：
GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup
注：dts是幫我們生成的類型聲明文件，直接使用會(huì)找不到
上面配置完畢后會(huì)在src目錄下生成一個(gè)auto-import.d.ts文件，里面幫我們自動(dòng)引入vue相關(guān)內(nèi)容，我們可以在項(xiàng)目中直接使用。
注意：上面配置完畢dts后可能并不會(huì)自動(dòng)生成auto-import.d.ts文件，可以重新運(yùn)行一下項(xiàng)目，或者關(guān)閉編輯器重新打開(kāi)運(yùn)行即可。
使用如下：
<script setup lang="ts">
// 這里我們不用引入ref直接使用
const msg = ref<string>('Hello Vue3')
</script>
<template>
{{ msg }}
</template>
<style scoped lang="scss"></style>補(bǔ)充：unplugin-auto-import自動(dòng)導(dǎo)入TS2304警告問(wèn)題
1.前置配置
通過(guò)vite.config.js配置自動(dòng)導(dǎo)入API
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
imports: ['vue', 'vue-router', 'pinia'],
eslintrc: {
enabled: false,
filepath: './.eslintrc-auto-import.json',
globalsPropValue: true,
},
})
]
})
生成文件：auto-imports.d.ts
2. TS2304
此時(shí)代碼中編寫(xiě)時(shí)會(huì)遇到TS的警告。Cannot find name 'ref'.ts(2304)
3.解決方案
ts.config.json文件引入聲明文件: include中引入auto-imports.d.ts
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"]
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"auto-imports.d.ts" // 此處引入該聲明文件
],
"references": [{ "path": "./tsconfig.node.json" }]
}
總結(jié)
到此這篇關(guān)于vue3中unplugin-auto-import自動(dòng)引入的文章就介紹到這了,更多相關(guān)vue3的unplugin-auto-import自動(dòng)引入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
談?wù)勔騐ue.js引發(fā)關(guān)于getter和setter的思考
最近因?yàn)楣镜男马?xiàng)目決定使用Vue.js來(lái)做，但在使用的過(guò)程中發(fā)現(xiàn)了一個(gè)有趣的事情，因?yàn)榘l(fā)現(xiàn)的這個(gè)事情展開(kāi)了一些對(duì)于getter和setter的思考，具體是什么下面通過(guò)這篇文章來(lái)一起看看吧，有需要的朋友們可以參考學(xué)習(xí)。2016-12-12
vue+vuex+axios實(shí)現(xiàn)登錄、注冊(cè)頁(yè)權(quán)限攔截
下面小編就為大家分享一篇vue+vuex+axios實(shí)現(xiàn)登錄、注冊(cè)頁(yè)權(quán)限攔截，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示功能
最近小編遇到這樣的問(wèn)題，多組關(guān)鍵詞，這里實(shí)現(xiàn)了關(guān)鍵詞的背景色與匹配值的字體顏色值相同，下面通過(guò)定義關(guān)鍵詞匹配改變字體顏色，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2019-07-07
今天小編就為大家分享一篇Vue點(diǎn)擊切換顏色的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果
本文主要介紹了Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue開(kāi)發(fā)之watch監(jiān)聽(tīng)數(shù)組、對(duì)象、變量操作分析
這篇文章主要介紹了Vue開(kāi)發(fā)之watch監(jiān)聽(tīng)數(shù)組、對(duì)象、變量操作,結(jié)合實(shí)例形式分析了vue.js使用Watch針對(duì)數(shù)組、對(duì)象、變量監(jiān)聽(tīng)相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
webpack+vue+express(hot)熱啟動(dòng)調(diào)試簡(jiǎn)單配置方法
今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動(dòng)調(diào)試簡(jiǎn)單配置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
基于Vue實(shí)現(xiàn)樹(shù)形穿梭框的示例代碼
這篇文章主要為大家介紹了如何利用Vue實(shí)現(xiàn)一個(gè)樹(shù)形穿梭框，elementUI和ant-d組件庫(kù)的穿梭框組件效果都不是很好，所以本文將利用一個(gè)新的插件來(lái)實(shí)現(xiàn)，需要的可以參考一下2022-04-04
這篇文章主要介紹了vue接入ts基本方法，關(guān)于ts，也出了很久，下面我們就來(lái)簡(jiǎn)單學(xué)習(xí)了下ts并且在原有項(xiàng)目上接入基本ts語(yǔ)法，也算是一個(gè)初級(jí)嘗試，簡(jiǎn)單梳理下基礎(chǔ)的接入配置和已經(jīng)遇到的問(wèn)題，供需要的小伙伴們參考2022-01-01
這篇文章主要介紹了vue傳值方式的十二種方法總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04