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

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

• use

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

• use

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!