首页 > 其他分享 >使用unplugin-auto-import自动导入插件优化vite开发vue3应用

使用unplugin-auto-import自动导入插件优化vite开发vue3应用

时间:2023-03-01 10:14:49浏览次数:52  
标签:插件 vue auto unplugin vue3 import vite

为什么要使用unplugin-auto-import插件? 


  使用vite编写vue3代码时,使用composition api函数、Vue Router、pinia状态管理等官方API需要在页面中显式引入。而使用unplugin-auto-import插件可以自动导入这些API,从而提高开发效率,同时使代码更加简洁易读。

如:

import { ref, reactive, Ref, defineComponent, ComponentPropsOptions } from 'vue'
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { defineStore, createPinia } from "pinia"

 

安装插件


 在项目中安装unplugin-auto-import插件

npm i unplugin-auto-import -D

 

引入插件


在vite.config.js文件中引入插件,并配置需要自动导入的插件和自定义导入的API:

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        // 需要自动导入的插件,自定义导入的API
        'vue',
        'vue-router',
        'pinia'
      ]
    })
  ]
})

 

使用插件


配置完成后,运行代码时会自动在根目录下生成一个auto-import.d.ts的文件。需要将该文件放入tsconfig.json中,插件才会生效:

{
  "include": [
    "./auto-imports.d.ts"
  ]
}

 

注意:如果出现报错“Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values”,需要终止进程并重新编译项目,插件才能生效。

通过使用unplugin-auto-import插件,我们可以轻松地优化vite开发vue3应用的开发效率和代码质量。 

标签:插件,vue,auto,unplugin,vue3,import,vite
From: https://www.cnblogs.com/lzuku/p/17167041.html

相关文章

  • atom 安装markdown-preview-enhanced插件
    atom自带markdown的支持,但是不够智能,例如每个md文件都要手动打开预览,这个插件切换文件的时候,也会自动切换预览。install插件​​markdown-preview-enhanced​​ctrl+shi......
  • vue3 路由
      vue2在2023年12月份开始停止维护,说实话,很苦逼,很多人根本还停留在vue2思想的时代,包括我自己 。之前一直在写vue的服务端渲染,好长时间已经忘了vue-router创......
  • Vue3 状态管理之pinia
    什么是Pinia在vue3之前我们最常用的状态管理就是Vuex,当然在vue3中也有相对应的Vuex的版本。但是还是推荐使用Pinia,原因有以下几点:语法简单,mutations不再存在。无......
  • 金蝶VB插件--单据保存前检查
    金蝶VB插件--单据保存前检查--转自https://bbs.csdn.net/topics/360161119?list=lzvb代码引用k3classEvents'-----以下是代码'实现一个很简单的功能'--单据体分录[F......
  • sublime text 安装插件后js、ts代码底色变白色
    万能的朋友圈,使用sublimetext编辑器,安装插件后发现javascript和typescript代码的底色变成了白色。有谁知道是那个插件导致的?麻烦说一下谢谢…… ......
  • vue3+openlayes实现离线地图加载
    概述OpenLayers使在任何网页中放置动态地图变得容易。它可以显示从任何来源加载的地图图块、矢量数据和标记。OpenLayers的开发旨在进一步使用各种地理信息。它是完全免......
  • Vue3 + vite + Ts + pinia + 实战
    Pinia起始于2019年11月左右的一次实验,其目的是设计一个拥有组合式API的Vue状态管理库。从那时起,我们就倾向于同时支持Vue2和Vue3,并且不强制要求开发者使用组......
  • 给wordpress编辑插件fckeditor添加中文字体(原创)(来源百事查-www.nbcio.
    用wordpress​建站这些天来觉得自带的编辑器总是那么的力不从心,如是就像这换一个编辑器,google了一下,欢乐fckeditor插件,感觉还算顺手,可是用了几天发现这个字体设置不了了,因为......
  • vue3中style标签内的一些样式使用
    /*vue3中style标签内的一些样式使用1、使用变量作为css的属性值例如:设置元素的字体大小及字体颜色<scriptsetup>constdata=reactive({fontSize:12,color:"......
  • Apache Maven Assembly自定义打包插件的使用
    前言本文主要记录在SpringBoot项目中使用ApacheMavenAssembly插件进行打包的相关内容;官网说明:https://maven.apache.org/plugins/maven-assembly-plugin/概述是什......