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

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

這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(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)目中寫入代碼，可以看到我們沒有手動(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目如何監(jiān)聽localStorage或sessionStorage的變化
這篇文章主要介紹了vue 項(xiàng)目如何監(jiān)聽localStorage或sessionStorage的變化，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
vue實(shí)現(xiàn)數(shù)字翻頁動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字翻頁動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
Vue前端項(xiàng)目部署IIS的實(shí)現(xiàn)
這篇文章主要介紹了Vue前端項(xiàng)目部署IIS的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
如何使用el-cascader組件寫下拉級(jí)聯(lián)多選及全選功能
這篇文章主要介紹了如何使用el-cascader組件寫下拉級(jí)聯(lián)多選及全選功能,因?yàn)槭怯腥x的功能,所以不能直接使用el-cascader組件,?而是選擇使用el-select組件,?在此組件內(nèi)部使用el-cascader-panel級(jí)聯(lián)面板,感興趣的朋友跟隨小編一起看看吧
2024-03-03
vue3組件通信的方式總結(jié)及實(shí)例用法
在本篇文章里小編給大家整理的是一篇關(guān)于vue3組件通信的方式總結(jié)及實(shí)例用法，對此有興趣的朋友們可以跟著學(xué)習(xí)下。
2021-12-12
elementUI el-input 只能輸入正整數(shù)驗(yàn)證的操作方法
這篇文章主要介紹了elementUI el-input 只能輸入正整數(shù)驗(yàn)證,本文給大家詳細(xì)講解對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-11-11
詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別
這篇文章主要介紹了詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成
在本篇文章中小編給大家分享了關(guān)于如何使用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。
2019-06-06
webpack dev-server代理websocket問題
這篇文章主要介紹了webpack dev-server代理websocket問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue3響應(yīng)式對象Reactive和Ref的用法解讀
這篇文章主要介紹了Vue3響應(yīng)式對象Reactive和Ref的用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09