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.回車后，系統(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)目編寫完成，打包的文件都挺大的，所以吧那些常用不會(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"的寫法，要用模塊直接ELEMENT點(diǎn)出來(lái)就行
ELEMENT.Message.error('成功'); // ELEMENT成為全局變量 ?一定要按照上面的寫法 ?"element-ui": "ELEMENT"總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue better-scroll插件使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要給大家介紹了vue項(xiàng)目中使用axios上傳圖片等文件操作，需要的朋友參考下吧2017-11-11
Vue實(shí)現(xiàn)各種動(dòng)態(tài)路由生成的技巧分享
Vue.js是一種流行的JavaScript框架,用于構(gòu)建用戶界面,Vue具有靈活的路由功能,可以根據(jù)特定需求動(dòng)態(tài)生成路由,本文將介紹Vue動(dòng)態(tài)路由生成的常見(jiàn)實(shí)現(xiàn)方法,并提供相應(yīng)的源代碼示例,需要的朋友可以參考下2025-07-07
如何利用vue3實(shí)現(xiàn)放大鏡效果實(shí)例詳解
最近有項(xiàng)目需要用到對(duì)圖片進(jìn)行局部放大,類似淘寶商品頁(yè)的放大鏡效果,經(jīng)過(guò)一番研究功能可用,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實(shí)現(xiàn)放大鏡效果的相關(guān)資料,需要的朋友可以參考下2021-09-09
el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位
這篇文章主要介紹了el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
最近在做APP客戶端掃描PC端二維碼登錄,于是記錄一下實(shí)現(xiàn)過(guò)程,下面這篇文章主要給大家介紹了關(guān)于Vue?PC前端掃碼登錄功能實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vue利用vue-baidu-map實(shí)現(xiàn)獲取經(jīng)緯度和搜索地址
在開(kāi)發(fā)項(xiàng)目的時(shí)候，發(fā)現(xiàn)需要獲取經(jīng)緯度，由于這個(gè)項(xiàng)目是用vue寫的，最后決定使用vue-baidu-map來(lái)快速獲取經(jīng)緯度，感興趣的可以了解一下2022-09-09
electron-builder打包vue2項(xiàng)目問(wèn)題總結(jié)
這篇文章主要介紹了electron-builder打包vue2項(xiàng)目問(wèn)題總結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08
詳解實(shí)現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理
這篇文章主要介紹了詳解實(shí)現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了在?Vue?中使用?iframe?嵌套頁(yè)面,使用?iframe?技術(shù)可以實(shí)現(xiàn)多個(gè)頁(yè)面之間的數(shù)據(jù)傳遞和交互，提高了網(wǎng)站的整體性能和用戶體驗(yàn)，需要的朋友可以參考下2023-05-05