Vue項目中實現(xiàn)ElementUI按需引入過程解析
更新時間：2023年05月09日 09:18:57 作者：不叫貓先生
這篇文章主要介紹了Vue項目中實現(xiàn)ElementUI按需引入,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
前言
為了減小項目打包體積，提高項目性能，對Element UI組件進行按需引入，但是在實際實踐過程中遇到了比較有意思的問題，官方寫的demo然而并不能行的通，有開發(fā)者在Issues提問，然后官方并沒有給予解決，而開發(fā)者用另一種方式實現(xiàn)了。
(在這里我就想吐槽：官方demo實現(xiàn)不了，寫在官網(wǎng)上給更多的人種坑，網(wǎng)上一大堆的Element UI組件按需引入幾乎都是官方的例子。我就想問問那些寫文章的兄弟們有么有實踐過，又給眾多兄弟埋坑呢！所以我總結(jié)一下給兄弟們避雷。)
官網(wǎng)demo:鏈接直達
Issues地址:鏈接直達
按需引入
一、誤區(qū)
這里有個誤區(qū)，不使用babel-plugin-import插件，而是如下這么寫，依然打包的是正個Element UI模塊。
import Vue from "vue"
import { Button } from "element-ui"
Vue.use(Button)二、正確手法
使用babel-plugin-import插件，組件庫按需加載時在 babel 編譯 js 階段進行了代碼轉(zhuǎn)換，只加載使用的組件代碼。
1、安裝插件
npm install babel-plugin-component -D
2、更改.babelrc配置
若項目目錄沒有.babelrc文件，沒有的話新建一個。在babel執(zhí)行編譯的過程中，會從項目的根目錄下的.babelrc文件中讀取配置。.babelrc是一個json格式的文件。在.babelrc配置文件中，主要是對預(yù)設(shè)(presets) 和 插件(plugins) 進行配置。
{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}3、 新建auto-import-elementUI.js文件，注冊需要用到的組件
這里以實際項目中使用為例，下面代碼注釋的是我項目中沒有用到的組件。完整組件列表和引入方式（完整組件列表以 components.json 為準）
注意：官方給的例子和我下面寫的不太一樣，這就是為什么用官方例子就報錯，官方是下面的寫法，在實際過程就會報錯，我所使用的Element UI 版本為2.15.13
//官方例子
import Vue from 'vue';
import {
Pagination,
Dialog,
Autocomplete,
Dropdown,
DropdownMenu,
DropdownItem,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Input,
InputNumber,
Radio,
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
Option,
OptionGroup,
Button,
ButtonGroup,
Table,
TableColumn,
DatePicker,
TimeSelect,
TimePicker,
Popover,
Tooltip,
Breadcrumb,
BreadcrumbItem,
Form,
FormItem,
Tabs,
TabPane,
Tag,
Tree,
Alert,
Slider,
Icon,
Row,
Col,
Upload,
Progress,
Spinner,
Badge,
Card,
Rate,
Steps,
Step,
Carousel,
CarouselItem,
Collapse,
CollapseItem,
Cascader,
ColorPicker,
Transfer,
Container,
Header,
Aside,
Main,
Footer,
Timeline,
TimelineItem,
Link,
Divider,
Image,
Calendar,
Backtop,
PageHeader,
CascaderPanel,
Loading,
MessageBox,
Message,
Notification
} from 'element-ui';
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;報錯如下:
為了避免出現(xiàn)上面的報錯現(xiàn)象，下面的寫法是Issus給出的正解，不會報錯：
//Issus給出的正解
import Vue from 'vue'
import {
Pagination,
Dialog,
// Autocomplete,
Dropdown,
DropdownMenu,
DropdownItem,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Input,
InputNumber,
Radio,
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
Option,
OptionGroup,
Button,
ButtonGroup,
Table,
TableColumn,
DatePicker,
TimeSelect,
TimePicker,
Popover,
Tooltip,
Breadcrumb,
BreadcrumbItem,
Form,
FormItem,
Tabs,
TabPane,
Tag,
Tree,
Alert,
Slider,
Icon,
Row,
Col,
Upload,
Progress,
// Spinner,
Badge,
Card,
Rate,
// Steps,
// Step,
// Carousel,
// CarouselItem,
// Collapse,
// CollapseItem,
Cascader,
ColorPicker,
// Transfer,
// Container,
// Header,
// Aside,
// Main,
// Footer,
Timeline,
TimelineItem,
Link,
Divider,
// Image,
Calendar,
// Backtop,
// PageHeader,
CascaderPanel,
Loading,
MessageBox,
Message,
Notification,
Scrollbar
} from 'element-ui';
Vue.use(Pagination);
Vue.use(Dialog);
// Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
// Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
// Vue.use(Steps);
// Vue.use(Step);
// Vue.use(Carousel);
// Vue.use(CarouselItem);
// Vue.use(Collapse);
// Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
// Vue.use(Transfer);
// Vue.use(Container);
// Vue.use(Header);
// Vue.use(Aside);
// Vue.use(Main);
// Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
// Vue.use(Image);
Vue.use(Calendar);
// Vue.use(Backtop);
// Vue.use(PageHeader);
Vue.use(CascaderPanel);
Vue.use(Scrollbar);
const { directive: loadingDirective, service: loadingService } = Loading
const msgbox = MessageBox
const { alert, confirm, prompt } = msgbox
Vue.use(loadingDirective)
Vue.prototype.$loading = loadingService
Vue.prototype.$msgbox = msgbox
Vue.prototype.$alert = alert
Vue.prototype.$confirm = confirm
Vue.prototype.$prompt = prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message
//設(shè)置項目中所有擁有 size 屬性的組件
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }至于為什么這么寫，就需要研究源碼了。
4、main.js引入
import "./auto-import-elementUI.js"
接下來啟動項目就可以啦，大功告成，如有遇到其他情況留言評論區(qū)。
到此這篇關(guān)于Vue項目中實現(xiàn)ElementUI按需引入的文章就介紹到這了,更多相關(guān)Vue ElementUI按需引入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue + Vue-router 同名路由切換數(shù)據(jù)不更新的方法
本篇文章主要介紹了Vue + Vue-router 同名路由切換數(shù)據(jù)不更新的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
下面小編就為大家分享一篇vue2.0 循環(huán)遍歷加載不同圖片的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
基于ElementUI實現(xiàn)v-tooltip指令的示例代碼
文本溢出隱藏并使用tooltip 提示的需求,相信在平時的開發(fā)中會經(jīng)常遇到,常規(guī)做法一般是使用 elementui 的 el-tooltip 組件,在每次組件更新的時候去獲取元素的寬度/高度判斷是否被隱藏,本文給大家介紹了基于ElementUI實現(xiàn)v-tooltip指令,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue項目,代碼提交至碼云,iconfont的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了深入淺出vue圖片路徑的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家介紹了Xx-vue自定義指令實現(xiàn)點擊水波紋漣漪效果，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要給大家介紹了關(guān)于vue點擊單張圖片放大實現(xiàn)的相關(guān)資料,在vue項目中實現(xiàn)點擊圖片放大功能相信對大家來說都不陌生,文中給出了詳細的js示例代碼,需要的朋友可以參考下2023-07-07
今天小編就為大家分享一篇vue項目引入字體.ttf的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue-cli3環(huán)境變量與分環(huán)境打包的方法示例
這篇文章主要介紹了vue-cli3環(huán)境變量與分環(huán)境打包的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
一個uniapp小程序的項目,我們需要實現(xiàn)一個非常實用的功能——類似于錨點定位的交互效果,即在首頁中有多個tab（分類標簽）,每個tab對應(yīng)著不同的模塊,當(dāng)用戶點擊某個分類的tab時,需要流暢地滾動到對應(yīng)的內(nèi)容位置,提供更好的用戶體驗,2023-10-10