vue.js3: 使用element-plus的icon图标(vue@3.2.37 / @element-plus/icons-vue@2.0.6)

 一，安装@element-plus/icons-vue

1,官网

https://element-plus.gitee.io/zh-CN/component/icon.html

2,安装

liuhongdi@lhdpc:/data/vue/axios$ npm install @element-plus/icons-vue
 
up to date in 2s

3,查看已安装的版本

liuhongdi@lhdpc:/data/vue/axios$ npm list @element-plus/icons-vue
axios@0.1.0 /data/vue/axios
├── @element-plus/icons-vue@2.0.6
└─┬ element-plus@2.2.7
  └── @element-plus/icons-vue@2.0.6 deduped

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/02/vue-js3-shi-yong-elementplus-de-icon-tu-biao-vue-3-2-37/

对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，main.js中引用

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//element-plus 的中文化
import locale from 'element-plus/lib/locale/lang/zh-cn'  //element-plus
//icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

//启动app
const app = createApp(App)

// 全局注册el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(ElementPlus,{locale})
app.mount('#app')

三，代码中使用

  <div style="width:800px;margin: auto;">
    <el-input v-model="rgb" placeholder="Please input" readonly="readonly">
      <template #prepend >RGB</template>
      <template #append>
        <el-icon @click="copy('rgb')" style="vertical-align: middle;">
          <CopyDocument />
        </el-icon>
      </template>
    </el-input>
    <el-input v-model="hex" placeholder="Please input" readonly="readonly" style="margin-top: 10px;">
      <template #prepend>十六进制</template>
      <template #append>
        <el-icon @click="copy('hex')" style="vertical-align: middle;">
          <CopyDocument />
        </el-icon>
      </template>
    </el-input>
  </div>

四，查看效果

五，查看vue框架的版本

liuhongdi@lhdpc:/data/vue/child$ npm list vue
child@0.1.0 /data/vue/child
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped