安装element-plus:npm install element-plus
在login.vue文件中按需引入ElButton组件,刚开始按照官网这样写:

import {ElButton} from 'element-plus'
export default defineComponent({
components: {
    ElButton
  }
})

报错:Module not found: Error: Can’t resolve ‘element-plus/lib/el-button’ in ‘D:\vue3\vue3-cms\src\views\login’

然后去官网查看配置,按需引入需要安装下面两个npm包

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

安装完成之后在vue.config.js中配置如下:

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
  transpileDependencies: true
})

需要注意使用element-plus时vue-cli版本不能太低,不然会报错“defineConfig不是一个函数‘这种错误。
配置完成之后在vue项目中不用再次引入直接使用就可以
想全局引入可以直接查看官网,比按需引入更简单,官网链接:

https://element-plus.gitee.io/en-US/guide/quickstart.html

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐