vue3-关于使用element-plus第三方组件库时出现的一些问题的解决方案(1)

这只是在使用element-plus组件开发过程中遇到的第一个问题,后面遇到更多问题及解决方案时会再同步到博客上来

--------------我是分割线------------------

今天用到element-plus时,想要使用element-plus的自动导入功能,但是出现了一些问题

我们先来看官方文档给出的方法:

首先安装依赖

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

 

嗯....在webpack.config.js下加入下方这段这段代码就行

 

 

因为使用的时CLI脚手架创建的项目,没有webpack.config.js文件,但是vue官方给出了解决方案:创建一个vue.config.js文件夹

使用configureWebpack来配置webpack,于是我加入这行代码后:

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },

完美运行,

 

 我们在main.ts中添加以下代码

import 'element-plus/theme-chalk/base.css'
import { ElButton } from 'element-plus'


const app = createApp(App)

const components = [ElButton]
for (const component of components) {
  app.component(component.name, component)
}

将需要添加的组件放到{ ElButton }和components 中即可~~~肥肠的方便