VUE3项目自动引入组件的解决方案

问题描述

vue的steup语法糖中如果引入了UI组件，在template中使用了该组件，但是在下面的js中没有使用，那么就会判定为该组件未使用，为了解决这个问题，可以按照以下方案进行解决

解决方案

1. 项目安装依赖

npm install -D unplugin-vue-components unplugin-auto-import

2. 在项目中配置

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite#

// vite.config.ts

import { defineConfig } from 'vite'

import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({

  // ...

  plugins: \[

    // ...

    AutoImport({

      resolvers: \[ElementPlusResolver()],

    }),

    Components({

      resolvers: \[ElementPlusResolver()],

    }),

  ],

})

Webpack#

// webpack.config.js

const AutoImport = require('unplugin-auto-import/webpack')

const Components = require('unplugin-vue-components/webpack')

const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {

  // ...

  plugins: \[

    AutoImport({

      resolvers: \[ElementPlusResolver()],

    }),

    Components({

      resolvers: \[ElementPlusResolver()],

    }),

  ],

}

3. 删除组件中引入的组件

4. 页面正常展示

不需要在组件中进行引入组件就可以在template中正常展示了，

5. 备注：在webpack中引入的时候需要注意版本，高于当前版本有可能报错

"unplugin-auto-import": "^0.16.7",

"unplugin-vue-components": "^0.25.2",