How to install Element UI and use vector graphics in vue3.0

Here we only focus on the installation and use of v3. If you want to learn about v2, you can move to its official website: https://element.eleme.io/#/zh-CN/component/installation
v3 official website: https://element-plus.org/zh-CN/guide/installation.html
Difference between vue2 and vue3 when using element ui
Installation Commands

The files introduced in main.js are different

When using the icon, v2 does not need to be installed, but v3 needs to be installed

There are differences in the way icons are written in vue files between v2 and v3

Icons in v2 use fonts, while icons in v3 use svg

Install Element UI

Install using npm

npm install element-plus --save

Icon icon needs to be installed

npm install @element-plus/icons-vue

Globally transfer to main.js

import elementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/assets/css/index.scss'
//Introduce external vector graphics import '@/assets/iconfont/iconfont.css'
const app = createApp(App);
app.config.globalProperties.axios = axios;
app
.use(elementPlus)
.mount('#app');

Write the code normally according to the label writing method specified in Element UI

vue file uses icon icon

<el-icon :size="size" :color="color"> <edit></edit> </el-icon>
or <edit></edit>
<add-location/>
//Vector illustration<i class="iconfont icon-huyan"></i>
//Introduce the icon (svg) you need to use
import {Edit,AddLocation} from '@element-plus/icons-vue'
components:{ Edit, AddLocation }

Introducing vector graphics into your project

download

Copy these six files into the project and import them into main.js before using them

This is the end of this article about installing Element UI in vue3.0 and using vector graphics. For more relevant content about installing Element UI in vue3.0, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue+ElementUI implements paging function-mysql data
Vue+elementui realizes multiple selection and search functions of drop-down table
Vue Element-ui implements tree control node adding icon detailed explanation
Use vue2+elementui for hover prompts
Detailed explanation of the use of ElementUI in Vue

<<: Steps to deploy ingress-nginx on k8s

>>: The table table uses: nth-child() to achieve alternate color change and alignment