vue3+ts+vue/cli实现element-plus按需自动导入

安装element-plus

npm install element-plus --save

安装自动导入插件

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

编辑vue.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 = {
  // configureWebpack为vue.config.js里的webpack配置
  configureWebpack: {
    devServer: {
      port: 8888,
      open: true
    },
    // plugins配置里加下面的代码
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
}

最好直接在main.ts导入下css样式

import 'element-plus/dist/index.css'

Sitemap · Rss

津ICP备2021004480号-3