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 中即可~~~肥腸的方便