快捷導(dǎo)航

Vue項(xiàng)目中實(shí)現(xiàn)ElementUI按需引入過(guò)程解析

更新時(shí)間：2023年05月09日 09:18:57 作者：不叫貓先生

這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)ElementUI按需引入,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

為了減小項(xiàng)目打包體積，提高項(xiàng)目性能，對(duì)Element UI組件進(jìn)行按需引入，但是在實(shí)際實(shí)踐過(guò)程中遇到了比較有意思的問(wèn)題，官方寫(xiě)的demo然而并不能行的通，有開(kāi)發(fā)者在Issues提問(wèn)，然后官方并沒(méi)有給予解決，而開(kāi)發(fā)者用另一種方式實(shí)現(xiàn)了。
(在這里我就想吐槽：官方demo實(shí)現(xiàn)不了，寫(xiě)在官網(wǎng)上給更多的人種坑，網(wǎng)上一大堆的Element UI組件按需引入幾乎都是官方的例子。我就想問(wèn)問(wèn)那些寫(xiě)文章的兄弟們有么有實(shí)踐過(guò)，又給眾多兄弟埋坑呢！所以我總結(jié)一下給兄弟們避雷。)

官網(wǎng)demo:鏈接直達(dá)
Issues地址:鏈接直達(dá)

按需引入

一、誤區(qū)

這里有個(gè)誤區(qū)，不使用babel-plugin-import插件，而是如下這么寫(xiě)，依然打包的是正個(gè)Element UI模塊。

import Vue from "vue"
import { Button } from "element-ui"
Vue.use(Button)

二、正確手法

使用babel-plugin-import插件，組件庫(kù)按需加載時(shí)在 babel 編譯 js 階段進(jìn)行了代碼轉(zhuǎn)換，只加載使用的組件代碼。

1、安裝插件

npm install babel-plugin-component -D

2、更改.babelrc配置

若項(xiàng)目目錄沒(méi)有.babelrc文件，沒(méi)有的話新建一個(gè)。在babel執(zhí)行編譯的過(guò)程中，會(huì)從項(xiàng)目的根目錄下的.babelrc文件中讀取配置。.babelrc是一個(gè)json格式的文件。在.babelrc配置文件中，主要是對(duì)預(yù)設(shè)(presets) 和插件(plugins) 進(jìn)行配置。

{
	"plugins": [
		[
			"component",
			{
				"libraryName": "element-ui",
				"styleLibraryName": "theme-chalk"
			}
		]
	]
}

3、新建auto-import-elementUI.js文件，注冊(cè)需要用到的組件

這里以實(shí)際項(xiàng)目中使用為例，下面代碼注釋的是我項(xiàng)目中沒(méi)有用到的組件。完整組件列表和引入方式（完整組件列表以 components.json 為準(zhǔn)）

注意：官方給的例子和我下面寫(xiě)的不太一樣，這就是為什么用官方例子就報(bào)錯(cuò)，官方是下面的寫(xiě)法，在實(shí)際過(guò)程就會(huì)報(bào)錯(cuò)，我所使用的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;

報(bào)錯(cuò)如下:

為了避免出現(xiàn)上面的報(bào)錯(cuò)現(xiàn)象，下面的寫(xiě)法是Issus給出的正解，不會(huì)報(bào)錯(cuò)：

//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è)置項(xiàng)目中所有擁有 size 屬性的組件
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }

至于為什么這么寫(xiě)，就需要研究源碼了。

4、main.js引入

import "./auto-import-elementUI.js"

接下來(lái)啟動(dòng)項(xiàng)目就可以啦，大功告成，如有遇到其他情況留言評(píng)論區(qū)。

到此這篇關(guān)于Vue項(xiàng)目中實(shí)現(xiàn)ElementUI按需引入的文章就介紹到這了,更多相關(guān)Vue ElementUI按需引入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: