element-plus组件使用图标

yanmengying

已于 2025-01-20 11:28:18 修改

阅读量1.3k

点赞数 4

文章标签：前端

于 2024-12-24 15:40:44 首次发布

本文链接：https://blog.youkuaiyun.com/yanmengying/article/details/144695405

版权

element-plus是和Vue3搭配使用的，Element-UI和Vue2搭配使用，不能跨版本使用

安装：

安装element-plus时(npm install element-plus --save )，出现错误，提示别的包的版本号，说明npm版本太高(高于7会出现这些错误)，降npm版本：npx -p npm@6 npm i --legacy-peer-deps
再输入npm --version时，还是原来的版本，比较迷惑，但是输入npm install element-plus --save 后，安装成功了！

使用：

使用1:全局引入

在Vue3中导入element-plus，main.js中配置如下，就可以在组件中使用element组件了

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')
// 或者
// createApp(App).use(router).use(ElementPlus).mount('#app')

使用2：按需导入

官网中介绍使用：首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

安装上面之后，使用脚手架创建vue3的话，需要在Webpack 的配置文件中进行修改(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({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
})

之后通过npm run serve运行，出现报错： AutoImport is not a function和 ERROR TypeError: Components is not a function

因为版本太新，需要回退版本,回退版本有两个方法：

npm install unplugin-auto-import@0.16.1 
npm install unplugin-vue-components@0.25.2

之后npm run serve运行成功。(我在安装的过程中，每个安装命令之后都会出现最上面的报错，需要每次输入npx -p npm@6 npm i --legacy-peer-deps命令才可以进行下去)

使用element过程中如果报错，注意看一下使用的组件中的一些参数有没有在其setup中定义(比如v-model使用的变量)

使用icon库：第一步在main.js中添加：两行代码

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) }

第二步，在要使用图标的组件中添加 import { Search } from '@element-plus/icons-vue' 注意是单引号不是双引号，没有分号结尾，不然会报错，另外，要在setup中return出要使用的图标名。此外，在temple中使用:prefix-icon和:suffix-icon分别在输入框的前后加入图标

<template>
  <--单独使用图标-->
  <el-icon><User /></el-icon>
  <--输入框中使用图标-->
 <el-input :prefix-icon="Search"/>
 <el-input :suffix-icon="Calendar"/>
</template>
<script>
import { Calendar, Search } from '@element-plus/icons-vue'
export default {
  name: 'Login',
  setup () {
    return {
      Search,
      Calendar
    }
  }
}
</script>

效果：