耀极客论坛

 找回密码
 立即注册
查看: 555|回复: 0

vue3.0安装Element ui及矢量图使用方式

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 02:35:45 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了vue3.0安装Element ui及矢量图使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
       
  • 在此只关注v3的安装及使用,如果想了解v2可移步到其官网:https://element.eleme.io/#/zh-CN/component/installation   
  • v3官网:https://element-plus.org/zh-CN/guide/installation.html   
  • 使用element ui时vue2和vue3的区别   
  • 安装命令
main.js中引入文件有所不同使用icon时v2不需要安装,v3需安装v2和v3在vue文件中使用icon时编写方式有所不同  icon在v2中使用的是字体,v3中使用的是svg
安装Element ui
       
  • 使用npm安装
  1. npm install element-plus --save
复制代码
  icon图标需安装
  1. npm install @element-plus/icons-vue
复制代码
       
  • 使用
  在main.js中全局转入
  1. import elementPlus from 'element-plus'
  2. import 'element-plus/dist/index.css'
  3. import '@/assets/css/index.scss'
  4. //引入外部矢量图
  5. import '@/assets/iconfont/iconfont.css'
  6. const app = createApp(App);
  7. app.config.globalProperties.axios = axios;
  8. app
  9. .use(elementPlus)
  10. .mount('#app');
复制代码
  按照Element ui中规定标签的写法,正常编写代码
vue文件使用icon图标
  1. ‹el-icon :size="size" :color="color"> ‹edit>‹/edit> ‹/el-icon>
  2. ‹edit>‹/edit>
  3. ‹add-location/>
  4. //矢量图
  5. ‹i class="iconfont icon-huyan">‹/i>
  6. //引入需要使用的icon(svg)
  7. import {Edit,AddLocation} from '@element-plus/icons-vue'
  8. components:{ Edit, AddLocation }
复制代码
项目中引入矢量图
  下载


       
  • 使用
  将这六个文件拷贝到项目中,在main.js中引入后再进行使用

  到此这篇关于vue3.0安装Element ui及矢量图使用的文章就介绍到这了,更多相关vue3.0安装Element ui内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 18:50 , Processed in 0.071216 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表