自动导入ref reactive route等vue的Composition API,减少样板代码和提高开发效率

最新推荐文章于 2025-05-06 18:27:06 发布

沉迷...

最新推荐文章于 2025-05-06 18:27:06 发布

阅读量210

点赞数 5

分类专栏： vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42343307/article/details/147670507

版权

vue3 专栏收录该内容

34 篇文章

订阅专栏

unplugin-auto-import是一个用于Vue 3（Composition API）的插件，主要功能是自动导入代码中使用的模块和函数，从而减少样板代码和提高开发效率。该插件支持Vue Composition API函数（如ref、reactive、computed等）以及来自其他库的函数（如Vue Router的useRoute、useRouter，Pinia的defineStore等）‌
unplugin-vue-components：Vue 的按需组件自动导入

安装

pnpm add unplugin-auto-import unplugin-vue-components -D

配置

vite.config.ts

import { defineConfig } from 'vite'
import {createVitePlugins} from './build/vite'
// https://vite.dev/config/
export default defineConfig({
  plugins: createVitePlugins(),
})

根目录建立文件build/vite/index.ts

import { resolve } from 'path'
import Vue from '@vitejs/plugin-vue'
// @ts-ignore
import AutoImport from 'unplugin-auto-import/vite' // 自动为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API
import Components from 'unplugin-vue-components/vite' // Vue 的按需组件自动导入
import viteCompression from 'vite-plugin-compression'

export function createVitePlugins() {
  const root = process.cwd()

  // 路径查找
  function pathResolve(dir: string) {
    return resolve(root, '.', dir)
  }

  return [
    Vue(),
    // VueJsx(),
    // UnoCSS(),
    // progress(),
    // PurgeIcons(),
    // ElementPlus({}),
    AutoImport({
      // 自动导入的文件类型
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/ // .md
      ],
      // 指定自动导入的库
      imports: [
        'vue',
        'vue-router',
        // 可额外添加需要 autoImport 的组件
        // {
        // }
      ],
      // 生成自动导入的声明文件路径
      dts: 'src/types/auto-imports.d.ts',
      // 自定义解析器
      resolvers: [],
      //  配置 ESLint 插件，这里禁用了自动导入的 ESLint 插件
      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')
      }
    }),
    Components({
      // 生成自定义 `auto-components.d.ts` 全局声明
      dts: 'src/types/auto-components.d.ts',
      // 自定义组件的解析器
      resolvers: [],
      //  指定需要自动注册的组件文件路径
      globs: ["src/components/**/**.{vue, md}", '!src/components/DiyEditor/components/mobile/**']
    }),
    // 构建过程中自动压缩生成的文件
    viteCompression({
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用
      threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
      algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
      ext: '.gz', // 生成的压缩包后缀
      deleteOriginFile: false //压缩后是否删除源文件
    })
  ]
}