element-plus中如何實現(xiàn)按需導入與全局導入
更新時間：2021年11月25日 09:27:29 作者：哈哈與黑洞大笑
本文主要介紹了element-plus中如何實現(xiàn)按需導入與全局導入，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
按需導入：
安裝插件
首先需要引入額外的插件：前**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' ?//圖標需要分開導入，按需導入圖標
import { ElButton } from 'element-plus'; ? //按需導入
?
const app = createApp(App);
//注冊組件
app.component("edit", Edit)
app.component("search", Search)
app.component('ElButton',ElButton)
app.mount('#app');
<template>
<h2>home頁面</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>
全局導入
推薦添加
// tsconfig.json
{
?"compilerOptions": {
? ?// ...
? ?"types": ["element-plus/global"]
}
}
安裝
npm install element-plus --save # or yarn add element-plus ? # 安裝icon圖標依賴庫 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庫
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組件
使用圖標，因為圖標和普通ui組件不是同一個包，使用需要分別導入
//導入具體的組件后直接使用
<template>
? ?<el-icon :size="20" :color="'blue'">
? ? ? ?<edit />
? ?</el-icon>
</template>
<script setup lang="ts">
? ?import { Edit } from '@element-plus/icons'
</script>
將圖標庫在main.ts文件中impott并使用app.component()注冊便可以直接在組件中使用了，和普通的使用ui庫同理
<template>
<h2>home頁面</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>
到此這篇關于element-plus中如何實現(xiàn)按需導入與全局導入的文章就介紹到這了,更多相關element-plus 按需導入與全局導入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了淺談vue權限管理實現(xiàn)及流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
今天小編就為大家分享一篇vue自定義全局共用函數(shù)詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
父組件傳遞給子組件的數(shù)據(jù),如果是一個復雜對象（例如一個數(shù)組或對象）,那么子組件只會監(jiān)聽對象的引用而不是對象的內(nèi)容,這意味著當對象的內(nèi)容發(fā)生變化時,子組件不會更新,本文給大家介紹了vue子組件不刷新的三種解決方案,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了key在Vue列表渲染時究竟起到了什么作用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
本篇文章主要介紹了vue-cli如何快速構建vue項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
vue使用sass根據(jù)環(huán)境進行樣式判斷區(qū)分方式
這篇文章主要介紹了vue使用sass根據(jù)環(huán)境進行樣式判斷區(qū)分方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了使用vue實現(xiàn)通過變量動態(tài)拼接url，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了Vue實現(xiàn)圖書管理案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
vue3組合式api實現(xiàn)v-lazy圖片懶加載的方法實例
vue作為前端主流的3大框架之一,目前在國內(nèi)有著非常廣泛的應用,下面這篇文章主要給大家介紹了關于vue3組合式api實現(xiàn)v-lazy圖片懶加載的相關資料,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了vue+iview實現(xiàn)手機號分段輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03