快捷導(dǎo)航

vue3+vite引入插件unplugin-auto-import的方法

更新時(shí)間：2022年10月14日 09:39:09 作者：啊咧咧呀

這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值?,需要的朋友可以參考下

自動(dòng)引入 composition api，不需要再手動(dòng)引入。
github地址：https://github.com/antfu/unplugin-auto-import

下載

npm i unplugin-auto-import -D

修改vite.config.ts文件

import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [vue(),AutoImport({
    imports: ['vue'],
    dts: 'src/auto-import.d.ts'
  })]
})

配置完畢后保存，此時(shí)會(huì)自動(dòng)生成一個(gè) auto-import.d.ts 的文件

現(xiàn)在我們可以在項(xiàng)目中寫(xiě)入代碼，可以看到我們沒(méi)有手動(dòng)引入 ref 也可以在項(xiàng)目中正常使用。

<template>
    <div>
        <button @click="flag = !flag">change flag</button>
        <div>{{ flag }}</div>
    </div>
</template>
 
<script setup lang="ts">
const flag = ref(false);
</script>
 
<style lang="less"></style>

到此這篇關(guān)于vue3+vite引入插件unplugin-auto-import的文章就介紹到這了,更多相關(guān)vue3引入插件unplugin-auto-import內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3中如何檢測(cè)數(shù)組的變化方式
這篇文章主要介紹了Vue3中如何檢測(cè)數(shù)組的變化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue實(shí)現(xiàn)PC端分辨率適配操作
這篇文章主要介紹了vue實(shí)現(xiàn)PC端分辨率適配操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue單向數(shù)據(jù)流的深入理解
隨著前端的項(xiàng)目的越來(lái)越復(fù)雜,出現(xiàn)了一堆概念來(lái)降低開(kāi)發(fā)的復(fù)雜性,單向數(shù)據(jù)流就是其中一個(gè),下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-01-01
Vue模板中保留HTML注釋的方法大全
在 Vue 開(kāi)發(fā)中,我們經(jīng)常需要在模板中添加注釋,但是,你可能會(huì)發(fā)現(xiàn) Vue 默認(rèn)會(huì)移除模板中的所有 HTML 注釋,今天我們就來(lái)深入探討如何在 Vue 中保留這些有價(jià)值的注釋,需要的朋友可以參考下
2026-01-01
vue中的rules表單校驗(yàn)規(guī)則使用方法示例詳解 :rules=“rules“
這篇文章主要介紹了vue中的rules表單校驗(yàn)規(guī)則使用方法示例詳解 :rules=“rules“,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-11-11
修改Vue打包后的默認(rèn)文件名操作
這篇文章主要介紹了修改Vue打包后的默認(rèn)文件名操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
UniApp加載Web頁(yè)面完整實(shí)現(xiàn)方案(附實(shí)例代碼)
在uniapp中加載外部網(wǎng)頁(yè),可以通過(guò)使用web-view組件來(lái)實(shí)現(xiàn),web-view是一個(gè)web瀏覽器組件,可以用來(lái)承載網(wǎng)頁(yè)的容器,這篇文章主要介紹了UniApp加載Web頁(yè)面完整實(shí)現(xiàn)方案的相關(guān)資料,需要的朋友可以參考下
2025-09-09
vue?el-input設(shè)置必填提示功能(單個(gè)與多個(gè))
有的功能需要設(shè)置必填項(xiàng),當(dāng)然也需要判斷是不是添上了,下面這篇文章主要給大家介紹了關(guān)于vue?el-input設(shè)置必填提示功能(單個(gè)與多個(gè))的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
Vue3+Vite 環(huán)境變量和模式配置詳解(推薦)
在Vue 3中,你可以通過(guò) import.meta.env 訪問(wèn)環(huán)境變量,這些變量可以在你的應(yīng)用代碼中使用,但它們通常用于配置不應(yīng)該硬編碼在代碼中的值,這篇文章主要介紹了Vue3+Vite 環(huán)境變量和模式配置詳解,需要的朋友可以參考下
2024-12-12
詳解vite2.0配置學(xué)習(xí)(typescript版本)
這篇文章主要介紹了詳解vite2.0配置學(xué)習(xí)(typescript版本)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02