Vue相关总结

unplugin-auto-import安装

unplugin-auto-import是一个按需自动导入Vue/Vue Router等官方Api的插件；作者是Vite生态圈大名鼎鼎的Anthony Fu

使用此插件后，不需要手动编写import {xxx} from vue这样的代码了，提升开发效率。

插件本身支持多种构建工具：Vite, Webpack, Rollup and esbuild。

我自己的项目是用的Vite，以下都是以Vite工程的配置。

一、安装插件

pnpm add unplugin-auto-import -D
复制代码

二、vite.config.js中配置插件

// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      // targets to transform
      include: [
        /\.[tj]sx?$/, 
        /\.vue$/, 
        /\.vue\?vue/, 
        /\.md$/,
      ],

      // global imports to register
      imports: [
        // 插件预设支持导入的api
        'vue',
        'vue-router',
        'pinia'
        // 自定义导入的api
      ],

      // Generate corresponding .eslintrc-auto-import.json file.
      // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
      eslintrc: {
        enabled: false, // Default `false`
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      },

      // Filepath to generate corresponding .d.ts file.
      // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
      // Set `false` to disable.
      dts: './auto-imports.d.ts',
    })
  ],
})
复制代码

当前插件支持自动导入的Api包括：Presets

三、修改tsconfig.json

插件配置之后，运行代码时会自动在根目录下(通过dts配置可修改路径)生成一个auto-import.d.ts文件，需要将此文件添加到tsconfig.json中，否则在使用api时会提示未定义：

// tsconfig.json
{
    "include": [
        "./auto-imports.d.ts"
      ]
}
复制代码

配置完成后，就可以直接在代码中使用vue/vue-router/pinia等api了，无需手动引入