Element-UI-Vue项目整合Element-UIIcon图标自定义Icon图标

小程序1440 更新时间：2025-06-08 04:33:08

2023年6月21日发(作者：)

Element-UI-Vue项⽬整合Element-UIIcon图标⾃定义Icon图标Element-UI - Vue项⽬整合Element-UI & Icon图标 & ⾃定义Icon图标博主很久之前就想使⽤Element-UI，总是因为需要学习后端技术鸽了很久（博主⽬前是偏后端），这⾥博主通过Vue项⽬来整合Element-UI。引⼊Element-UInpm安装Vue项⽬整合Element-UI会⽤到，这⾥博主介绍⼀下。npm i element-ui -Si：是install的简写。-S：即--save（保存），包会被注册到的dependencies⾥⾯。E:workspaceWebStormblogproject>E:workspaceWebStormblogproject>npm i element-ui -S...+ element-ui@2.14.1added 6 packages from 6 contributors in 7.474s在Vue项⽬⼊⼝⽂件中添加：import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/'(ElementUI)这样就可以在Vue项⽬中使⽤Element-UI了。修改：很明显Element-UI使⽤成功了。CDN建议使⽤CDN引⼊Element-UI时锁定版本，以免将来Element-UI升级时受到⾮兼容性更新的影响。如版本2.14.1：引⼊这些⽂件后，就可以使⽤Element-UI了。 images

搜索

效果和上⾯是⼀样的，Element-UI使⽤成功了。Javascript⽂件引⼊顺序如下，因为Element-UI是基于Vue2的，所以要先引⼊Vue。 Icon图标Element-UI提供了⼀套常⽤的图标集合。直接通过设置类名为el-icon-iconName来使⽤即可，上⾯的代码中也有涉及。

查看有哪些图标：⾃定义Icon图标Element-UI提供的图标还是有限的，所以需要⾃定义Icon图标，通过下⾯代码就可以⾃定义Icon图标，很简单吧（知道CSS即可）。代码： images

搜索

效果如下图所⽰：很明显效果符合预期。Vue项⽬整合Element-UI、Icon图标以及⾃定义Icon图标就介绍到这⾥。写博客是博主记录⾃⼰的学习过程，如果有错误，请指正，谢谢！

2023年6月21日发(作者：)

Element-UI-Vue项⽬整合Element-UIIcon图标⾃定义Icon图标Element-UI - Vue项⽬整合Element-UI & Icon图标 & ⾃定义Icon图标博主很久之前就想使⽤Element-UI，总是因为需要学习后端技术鸽了很久（博主⽬前是偏后端），这⾥博主通过Vue项⽬来整合Element-UI。引⼊Element-UInpm安装Vue项⽬整合Element-UI会⽤到，这⾥博主介绍⼀下。npm i element-ui -Si：是install的简写。-S：即--save（保存），包会被注册到的dependencies⾥⾯。E:workspaceWebStormblogproject>E:workspaceWebStormblogproject>npm i element-ui -S...+ element-ui@2.14.1added 6 packages from 6 contributors in 7.474s在Vue项⽬⼊⼝⽂件中添加：import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/'(ElementUI)这样就可以在Vue项⽬中使⽤Element-UI了。修改：很明显Element-UI使⽤成功了。CDN建议使⽤CDN引⼊Element-UI时锁定版本，以免将来Element-UI升级时受到⾮兼容性更新的影响。如版本2.14.1：引⼊这些⽂件后，就可以使⽤Element-UI了。 images