欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年05月09日 09:18:57   作者：不叫貓先生  
這篇文章主要介紹了Vue項目中實現(xiàn)ElementUI按需引入,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

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

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

按需引入

一、誤區(qū)

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

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

二、正確手法

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

1、安裝插件

npm install babel-plugin-component -D

2、更改.babelrc配置

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

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

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

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

注意：官方給的例子和我下面寫的不太一樣，這就是為什么用官方例子就報錯，官方是下面的寫法，在實際過程就會報錯，我所使用的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-cli的學(xué)習(xí)使用教程

    vue腳手架vue-cli的學(xué)習(xí)使用教程

    本篇文章主要介紹了vue腳手架vue-cli的學(xué)習(xí)使用教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • 淺析Vue為什么需要同時使用Ref和Reactive

    淺析Vue為什么需要同時使用Ref和Reactive

    這篇文章主要想來和大家一起探討一下Vue為什么需要同時使用Ref和Reactive，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起了解一下
    2023-08-08
  • Vue 實現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求

    Vue 實現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求

    這篇文章主要介紹了Vue 實現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請求，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue的三種圖片引入方式代碼實例

    vue的三種圖片引入方式代碼實例

    這篇文章主要介紹了vue的三種圖片引入方式代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-11-11
  • 如何使用 vue-cli 創(chuàng)建模板項目

    如何使用 vue-cli 創(chuàng)建模板項目

    這篇文章主要介紹了如何使用 vue-cli 創(chuàng)建模板項目，幫助大家更好的理解和學(xué)習(xí)vue框架的知識，感興趣的朋友可以了解下
    2020-11-11
  • Vue 幸運(yùn)大轉(zhuǎn)盤實現(xiàn)思路詳解

    Vue 幸運(yùn)大轉(zhuǎn)盤實現(xiàn)思路詳解

    這篇文章主要介紹了Vue 幸運(yùn)大轉(zhuǎn)盤實現(xiàn)思路詳解,需要的朋友可以參考下
    2019-05-05
  • vue實現(xiàn)過渡動畫Message消息提示組件示例詳解

    vue實現(xiàn)過渡動畫Message消息提示組件示例詳解

    這篇文章主要為大家介紹了vue實現(xiàn)過渡動畫Message消息提示組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-07-07
  • vue卡片式點(diǎn)擊切換圖片組件使用詳解

    vue卡片式點(diǎn)擊切換圖片組件使用詳解

    這篇文章主要為大家詳細(xì)介紹了vue卡片式點(diǎn)擊切換圖片組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-06-06
  • Vue按時間段查詢數(shù)據(jù)組件使用詳解

    Vue按時間段查詢數(shù)據(jù)組件使用詳解

    這篇文章主要為大家詳細(xì)介紹了Vue按時間段查詢數(shù)據(jù)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-08-08
  • Vue Mixins混入介紹與使用

    Vue Mixins混入介紹與使用

    如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧
    2023-02-02

最新評論