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

vue-cli3.0按需引入element-ui組件方式

 更新時間：2023年10月10日 10:51:42   作者：Stavin?Li  
這篇文章主要介紹了vue-cli3.0按需引入element-ui組件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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)會自動配置引入

  • babel.config.js
  • main.js
  • src\plugins\element.js
  • App.vue 自動將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

一般項目編寫完成，打包的文件都挺大的，所以吧那些常用不會改變的采用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點出來就行

ELEMENT.Message.error('成功'); // ELEMENT成為全局變量 ?一定要按照上面的寫法 ?"element-ui": "ELEMENT"

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用Vue.js報錯：ReferenceError: “Vue is not defined“ 的原因與解決方案

    使用Vue.js報錯：ReferenceError: “Vue is not d

    在前端開發(fā)中,ReferenceError: "Vue is not defined" 是一個常見的錯誤,該錯誤通常發(fā)生在項目中未正確引入 Vue.js 框架或代碼配置存在問題時,本篇文章將詳細(xì)分析該錯誤的成因,并提供多種解決方案,幫助開發(fā)者快速排查問題,需要的朋友可以參考下
    2024-12-12
  • Vue實現(xiàn)快捷鍵錄入功能的示例代碼

    Vue實現(xiàn)快捷鍵錄入功能的示例代碼

    有的時候項目需要在頁面使用快捷鍵，而且需要對快捷鍵進(jìn)行維護(hù)。本文將為大家展示Vue實現(xiàn)快捷鍵錄入功能的示例代碼，感興趣的可以了解一下
    2022-04-04
  • Vue結(jié)合Video.js播放m3u8視頻流的方法示例

    Vue結(jié)合Video.js播放m3u8視頻流的方法示例

    本篇文章主要介紹了Vue+Video.js播放m3u8視頻流的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • Vue手動控制點擊事件Click觸發(fā)方式

    Vue手動控制點擊事件Click觸發(fā)方式

    這篇文章主要介紹了Vue手動控制點擊事件Click觸發(fā)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-01-01
  • 如何使用RoughViz可視化Vue.js中的草繪圖表

    如何使用RoughViz可視化Vue.js中的草繪圖表

    這篇文章主要介紹了如何使用RoughViz可視化Vue.js中的草繪圖表，幫助大家更好的理解和使用roughViz，感興趣的朋友可以了解下
    2021-01-01
  • vuex存儲數(shù)據(jù)的幾種方法實例詳解

    vuex存儲數(shù)據(jù)的幾種方法實例詳解

    在瀏覽網(wǎng)頁時我們有些時候需要記住一些用戶選擇的信息,比如登陸時我們?nèi)绻x擇了記住密碼,那么我們下次進(jìn)入該網(wǎng)頁時就會有你上次的登陸信息,下面這篇文章主要給大家介紹了關(guān)于vuex存儲數(shù)據(jù)的幾種方法,需要的朋友可以參考下
    2022-10-10
  • vue3組件TS類型聲明實例代碼

    vue3組件TS類型聲明實例代碼

    這篇文章主要給大家介紹了關(guān)于vue3組件TS類型聲明的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2023-07-07
  • vue3項目中各個文件的作用詳細(xì)介紹

    vue3項目中各個文件的作用詳細(xì)介紹

    在Vue3項目中,通常會有以下一些常見的目錄和文件,下面這篇文章主要給大家介紹了關(guān)于vue3項目中各個文件的作用,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-09-09
  • Vue將頁面導(dǎo)出為圖片或者PDF

    Vue將頁面導(dǎo)出為圖片或者PDF

    這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)出頁面為PDF格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-06-06
  • vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)

    vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)

    這篇文章主要介紹了vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04

最新評論