vue-cli3.0按需引入element-ui組件方式
更新時(shí)間：2023年10月10日 10:51:42 作者：Stavin?Li
這篇文章主要介紹了vue-cli3.0按需引入element-ui組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue-cli3.0按需引入element-ui組件
1.引入vue add element
How do you want to import Element? -->選擇 Import on demand （關(guān)鍵）
Choose the locale you want to load–>選擇 zh-CN
2.回車(chē)后，系統(tǒng)會(huì)自動(dòng)配置引入
- babel.config.js
- main.js
- src\plugins\element.js
- App.vue 自動(dòng)將
el-button作為范例
3.cd src\plugins\element.js修改
以Carousel 走馬燈為例
import { Carousel, CarouselItem } from 'element-ui'
Vue.use(Carousel)
Vue.use(CarouselItem)完整組件列表和引入方式
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,
Badge,
Card,
Rate,
Steps,
Step,
Carousel,
CarouselItem,
Collapse,
CollapseItem,
Cascader,
ColorPicker,
Transfer,
Container,
Header,
Aside,
Main,
Footer,
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(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(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;vue-cli3.0用cdn引入element-ui
一般項(xiàng)目編寫(xiě)完成，打包的文件都挺大的，所以吧那些常用不會(huì)改變的采用cdn引入，減小包的體積，本例子使用的是vue-cli3.0，先在vue.config.js配置externals
config.externals = {
Vue: "Vue",
Vuex: "Vuex",
"element-ui": "ELEMENT",
moment: 'moment',
echarts: 'echarts'
}在index.html中加入
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <link rel="external nofollow" rel="stylesheet"> <script src="https://cdn.bootcss.com/element-ui/2.4.5/index.js"></script> <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
將 import xxx from 'xxx’去除，這里的xxx代指你要用cdn引入的，上面已經(jīng)完成，如果你要使用element-ui的Message模塊，使用如下，上面的external一定要按照 “element-ui”: "ELEMENT"的寫(xiě)法，要用模塊直接ELEMENT點(diǎn)出來(lái)就行
ELEMENT.Message.error('成功'); // ELEMENT成為全局變量 ?一定要按照上面的寫(xiě)法 ?"element-ui": "ELEMENT"總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue.js報(bào)錯(cuò)：ReferenceError: “Vue is not d
在前端開(kāi)發(fā)中,ReferenceError: "Vue is not defined" 是一個(gè)常見(jiàn)的錯(cuò)誤,該錯(cuò)誤通常發(fā)生在項(xiàng)目中未正確引入 Vue.js 框架或代碼配置存在問(wèn)題時(shí),本篇文章將詳細(xì)分析該錯(cuò)誤的成因,并提供多種解決方案,幫助開(kāi)發(fā)者快速排查問(wèn)題,需要的朋友可以參考下2024-12-12
有的時(shí)候項(xiàng)目需要在頁(yè)面使用快捷鍵，而且需要對(duì)快捷鍵進(jìn)行維護(hù)。本文將為大家展示Vue實(shí)現(xiàn)快捷鍵錄入功能的示例代碼，感興趣的可以了解一下2022-04-04
Vue結(jié)合Video.js播放m3u8視頻流的方法示例
本篇文章主要介紹了Vue+Video.js播放m3u8視頻流的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Vue手動(dòng)控制點(diǎn)擊事件Click觸發(fā)方式
這篇文章主要介紹了Vue手動(dòng)控制點(diǎn)擊事件Click觸發(fā)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了如何使用RoughViz可視化Vue.js中的草繪圖表，幫助大家更好的理解和使用roughViz，感興趣的朋友可以了解下2021-01-01
vuex存儲(chǔ)數(shù)據(jù)的幾種方法實(shí)例詳解
在瀏覽網(wǎng)頁(yè)時(shí)我們有些時(shí)候需要記住一些用戶(hù)選擇的信息,比如登陸時(shí)我們?nèi)绻x擇了記住密碼,那么我們下次進(jìn)入該網(wǎng)頁(yè)時(shí)就會(huì)有你上次的登陸信息,下面這篇文章主要給大家介紹了關(guān)于vuex存儲(chǔ)數(shù)據(jù)的幾種方法,需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了關(guān)于vue3組件TS類(lèi)型聲明的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
vue3項(xiàng)目中各個(gè)文件的作用詳細(xì)介紹
在Vue3項(xiàng)目中,通常會(huì)有以下一些常見(jiàn)的目錄和文件,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目中各個(gè)文件的作用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)出頁(yè)面為PDF格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
vue異步組件與組件懶加載問(wèn)題(import不能導(dǎo)入變量字符串路徑)
這篇文章主要介紹了vue異步組件與組件懶加載問(wèn)題(import不能導(dǎo)入變量字符串路徑)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04