快捷導(dǎo)航

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

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

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

自動引入 composition api，不需要再手動引入。
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'
  })]
})

配置完畢后保存，此時會自動生成一個 auto-import.d.ts 的文件

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

<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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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