Hi FE !
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
  1. 下载

npm install unplugin-auto-import@0.16.1
  1. vue.config.js 中引入


// 自动按需加载
const AutoImport = require("unplugin-auto-import/webpack")

module.exports = defineConfig({
 
  configureWebpack: (config) => {
    config.output.library = `${packageName}-[name]`
    config.output.libraryTarget = "umd"
    config.output.chunkLoadingGlobal = `webpackJsonp_${packageName}`
    config.plugins = [
      ...config.plugins,
      AutoImport({
        imports: ["vue", "vue-router", "vuex"],
        dts: true,
        eslintrc: {
          enabled: true, // 默认false, true启用。生成一次就可以,避免每次工程启动都生成
          filepath: "./.eslintrc-auto-import.json", // 生成json文件,eslintrc中引入
          globalsPropValue: true
        }
      })
    ]

 
  },
  devServer: {
  
  }
})

  1. .eslintrc

module.exports = {
  root: true,
  env: {
    node: true,
    "vue/setup-compiler-macros": true
  },
  extends: [
    "plugin:vue/vue3-essential",
    "@vue/standard",
    "@vue/typescript/recommended",
    "./.eslintrc-auto-import.json"
  ],
  1. ts.config.json

ts.config.json文件引入声明文件: include中引入auto-imports.d.ts

{ "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": ["esnext", "dom"] }, "include": [ "src//*.ts", "src//.d.ts", "src/**/.tsx", "src/**/*.vue", "auto-imports.d.ts" // 此处引入该声明文件 ], "references": [{ "path": "./tsconfig.node.json" }] }

https://github.com/unplugin/unplugin-auto-import

Edit this page
最近更新: 2025/12/2 01:46
Contributors: qdleader
qdleader
本站总访问量 129823次 | 本站访客数 12人