element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入
按需導(dǎo)入:
安裝插件
首先需要引入額外的插件:前**vite-plugin-components
已重命名為unplugin-vue-components
**
npm install unplugin-vue-components
配置插件
在weapack或vite配置文件內(nèi)中添加配置
// vite.config.ts import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' ? export default { ?plugins: [ ? ?// ... ? ?Components({ ? ? ?resolvers: [ElementPlusResolver()], ? }), ], }
// webpack.config.js const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') ? module.exports = { ?// ... ?plugins: [ ? ?Components({ ? ? ?resolvers: [ElementPlusResolver()], ? }), ], }
//main.ts import { createApp } from 'vue' import App from './App.vue' ? import { Edit,Search } from '@element-plus/icons' ?//圖標(biāo)需要分開(kāi)導(dǎo)入,按需導(dǎo)入圖標(biāo) import { ElButton } from 'element-plus'; ? //按需導(dǎo)入 ? const app = createApp(App); //注冊(cè)組件 app.component("edit", Edit) app.component("search", Search) app.component('ElButton',ElButton) app.mount('#app');
<template> <h2>home頁(yè)面</h2> ? ?<el-button type="primary" >主要按鈕</el-button> ? ?<el-button type="success" >成功按鈕</el-button> ? ?<el-icon :size="20" :color="'blue'"> ? ? ? ?<edit /> ? ?</el-icon> ? ?<el-icon :size="20"> ? ? ? ?<search></search> ? ?</el-icon> </template> <script setup lang="ts"> </script>
全局導(dǎo)入
推薦添加
// tsconfig.json { ?"compilerOptions": { ? ?// ... ? ?"types": ["element-plus/global"] } }
安裝
npm install element-plus --save # or yarn add element-plus ? # 安裝icon圖標(biāo)依賴(lài)庫(kù) npm install @element-plus/icons # or yarn add @element-plus/icons
在main.ts 文件中全局配置
import { createApp } from 'vue' import App from './App.vue' import { store, key } from './store'; // 注入路由 import router from './router'; ? // 全局引入ui庫(kù) 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');
使用ui組件
使用圖標(biāo),因?yàn)閳D標(biāo)和普通ui組件不是同一個(gè)包,使用需要分別導(dǎo)入
//導(dǎo)入具體的組件后直接使用 <template> ? ?<el-icon :size="20" :color="'blue'"> ? ? ? ?<edit /> ? ?</el-icon> </template> <script setup lang="ts"> ? ?import { Edit } from '@element-plus/icons' </script>
將圖標(biāo)庫(kù)在main.ts文件中impott并使用app.component()注冊(cè)便可以直接在組件中使用了,和普通的使用ui庫(kù)同理
<template> <h2>home頁(yè)面</h2> ? ?<el-button type="primary" >主要按鈕</el-button> ? ?<el-button type="success" >成功按鈕</el-button> ? ?<el-icon :size="20" :color="'blue'"> ? ? ? ?<edit /> ? ?</el-icon> ? ?<el-icon :size="20"> ? ? ? ?<search></search> ? ?</el-icon> </template> <script setup lang="ts"> </script>
到此這篇關(guān)于element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入的文章就介紹到這了,更多相關(guān)element-plus 按需導(dǎo)入與全局導(dǎo)入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue使用高德地圖實(shí)現(xiàn)添加點(diǎn)標(biāo)記和獲取點(diǎn)擊位置信息的示例代碼
這篇文章主要介紹了vue使用高德地圖實(shí)現(xiàn)添加點(diǎn)標(biāo)記和獲取點(diǎn)擊位置信息的示例代碼,文中補(bǔ)充介紹了高德vue-amap使用(一)標(biāo)記點(diǎn)位獲取地址及經(jīng)緯度,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01vue實(shí)現(xiàn)的上傳圖片到數(shù)據(jù)庫(kù)并顯示到頁(yè)面功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)的上傳圖片到數(shù)據(jù)庫(kù)并顯示到頁(yè)面功能,結(jié)合實(shí)例形式分析了基于vue.js的數(shù)據(jù)庫(kù)操作及頁(yè)面圖片顯示相關(guān)操作技巧,需要的朋友可以參考下2018-03-03vue中vxe-table虛擬滾動(dòng)列表的使用詳解
vxe-table 是一個(gè)功能強(qiáng)大的 Vue 表格組件,它支持虛擬滾動(dòng)列表作為其核心功能之一,本文主要介紹一下vxe-table的虛擬滾動(dòng)列表功能的使用場(chǎng)景和優(yōu)勢(shì),感興趣的可以了解下2023-12-12基于Vue 服務(wù)端Cookies刪除的問(wèn)題
今天小編就為大家分享一篇基于Vue 服務(wù)端Cookies刪除的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue3?-?setup?script的使用體驗(yàn)分享
Vue3中的setup一種是setup函數(shù),一種是script setup,這篇文章主要給大家介紹了關(guān)于Vue3?-?setup?script使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03vite的proxy查看真實(shí)請(qǐng)求地址方式詳解
這篇文章主要為大家介紹了vite的proxy查看真實(shí)請(qǐng)求地址方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11vue動(dòng)畫(huà)—通過(guò)鉤子函數(shù)實(shí)現(xiàn)半場(chǎng)動(dòng)畫(huà)操作
這篇文章主要介紹了vue動(dòng)畫(huà)—通過(guò)鉤子函數(shù)實(shí)現(xiàn)半場(chǎng)動(dòng)畫(huà)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離
這篇文章主要為大家詳細(xì)介紹了Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10