Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to achieve on-demand import and global import in element-plus, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Import on demand:

Install the plug-in

First you need to introduce additional plug-ins: the former * * vite-plugin-components has been renamed to unplugin-vue-components**

Npm install unplugin-vue-components

Configure plug-in

Add configuration in weapack or vite configuration file

/ / vite.config.tsimport Components from 'unplugin-vue-components/vite'import {ElementPlusResolver} from' unplugin-vue-components/resolvers'export default {plugins: [/ /... Components ({resolvers: [ElementPlusResolver ()],}),],} / / webpack.config.jsconst Components = require ('unplugin-vue-components/webpack') const {ElementPlusResolver} = require (' unplugin-vue-components/resolvers') module.exports = {/ /. Plugins: [Components ({resolvers: [ElementPlusResolver ()],}),],}, / main.tsimport {createApp} from 'vue'import App from'. / App.vue'import {Edit,Search} from'@ element-plus/icons' / / icons need to be imported separately, on-demand import icon import {ElButton} from 'element-plus'; / / on-demand import const app = createApp (App) / / Registration component app.component ("edit", Edit) app.component ("search", Search) app.component ('ElButton',ElButton) app.mount (' # app'); the main button on the home page succeeded in global import

Recommended to add

/ / tsconfig.json {"compilerOptions": {/ /... "types": ["element-plus/global"]}}

Installation

Npm install element-plus-save# oryarn add element-plus# installs the icon icon dependent library npm install @ element-plus/icons# oryarn add @ element-plus/icons

Global configuration in the main.ts file

Import {createApp} from 'vue'import App from'. / App.vue'import {store, key} from'. / store';// injection routing import router from'. / router';// globally introduces the ui library import ElementPlus from 'element-plus'import' element-plus/dist/index.css'const app = createApp (App); app.use (store, key); app.use (router); app.use (ElementPlus); app.mount ('# app')

Using ui components

Use icons, because icons and ordinary ui components are not the same package, and need to be imported separately

/ / use import {Edit} from'@ element-plus/icons' directly after importing specific components

Impott the icon library in the main.ts file and register it with app.component () and you can use it directly in the component, just like using the ui library.

Home page main button success button Thank you for reading this article carefully. I hope the article "how to achieve on-demand Import and Global Import in element-plus" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.