vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程

发布于:2024-06-28 ⋅ 阅读:(163) ⋅ 点赞:(0)

是否还在为每次都需要导入框架方法而烦恼呢?

// 每次都需手动导入框架方法
import { ref } from 'vue'

let num = ref(0)

用 unplugin-auto-import 来帮你吧,以后只需这样写就行啦!

let num = ref(0)

官方示例如下图

在这里插入图片描述

使用流程

1. 安装 unplugin-auto-import

npm i -D unplugin-auto-import

2. vite 配置中导入

vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'
// 项目中集成了 unplugin-vue-router 时,此处导入VueRouterAutoImports  需用  代替 vue-router
import { VueRouterAutoImports } from 'unplugin-vue-router'

plugins 中加入 AutoImport

  plugins: [
    // VueRouter  必须在 vue() 之前
    VueRouter({}),
    Layouts({
      layoutsDirs: 'src/layouts', // 指定布局文件的目录路径
      defaultLayout: 'default' // 指定默认布局文件的名称
    }),
    vue(),
    vueJsx(),
    vueDevTools(),
    AutoImport({
      // 解析的文件类型
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/ // .md
      ],
      // 需自动导入方法的库
      imports: [
        'vue',
        // 项目中集成了 unplugin-vue-router 时,此处需用 VueRouterAutoImports 替换掉 'vue-router'
        VueRouterAutoImports
      ]
    })
  ],

3. 添加 ts 相关配置

tsconfig.app.json 的 include 中添加 "auto-imports.d.ts" ,最终效果如下:

  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"],

4. 重启 vscode

以便触发插件对相关文件的识别和解析

5. 重启项目

会重新生成 auto-imports.d.ts 文件(内部可见自动导入的框架方法)

通过下方代码测试效果:

<script setup lang="ts">
let num = ref(0)
</script>

<template>
  <div>{{ num }}</div>
</template>

若页面正常渲染无报错,恭喜配置成功!

更多配置和用法见官网

https://www.npmjs.com/package/unplugin-auto-import


网站公告

今日签到

点亮在社区的每一天
去签到