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 (关键)

Choose the locale you want to load–>选择 zh-CN

2.回车后,系统会自动配置引入

  • 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 href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" 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引入的,上面已经完成,如果你要使用element-ui的Message模块,使用如下,上面的external一定要按照 “element-ui”: "ELEMENT"的写法,要用模块直接ELEMENT点出来就行

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue-router报错:uncaught error during route navigati问题及解决

    vue-router报错:uncaught error during route 

    这篇文章主要介绍了vue-router报错:uncaught error during route navigati问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue3+vite动态加载路由,本地路由和线上路由匹配方式

    vue3+vite动态加载路由,本地路由和线上路由匹配方式

    这篇文章主要介绍了vue3+vite动态加载路由,本地路由和线上路由匹配方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue项目在线上服务器访问失败原因分析

    vue项目在线上服务器访问失败原因分析

    这篇文章主要介绍了vue项目在线上服务器访问失败原因分析,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 在Vue3中使用vue-qrcode库实现二维码生成的方法

    在Vue3中使用vue-qrcode库实现二维码生成的方法

    在Vue3中实现二维码生成需要使用第三方库来处理生成二维码的逻辑,常用的库有 qrcode和 vue-qrcode,这篇文章主要介绍了在Vue3中使用vue-qrcode库实现二维码生成,需要的朋友可以参考下
    2023-12-12
  • vue请求本地自己编写的json文件的方法

    vue请求本地自己编写的json文件的方法

    这篇文章主要介绍了vue请求本地自己编写的json文件,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • avue-crud多级复杂的动态表头的实现示例

    avue-crud多级复杂的动态表头的实现示例

    Avue.js 是基于现有的element-ui库进行的二次封装,本文主要介绍了avue-crud多级复杂的动态表头,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • 浅谈Vue数据绑定的原理

    浅谈Vue数据绑定的原理

    本篇文章主要介绍了浅谈Vue数据绑定的原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue 路由传参加密的示例代码

    Vue 路由传参加密的示例代码

    这篇文章主要介绍了Vue 路由传参加密,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vue封装全局弹窗警告组件this.$message.success问题

    vue封装全局弹窗警告组件this.$message.success问题

    这篇文章主要介绍了vue封装全局弹窗警告组件this.$message.success问题,具有很的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • vue3.0实现复选框组件的封装

    vue3.0实现复选框组件的封装

    这篇文章主要为大家详细介绍了vue3.0实现复选框组件的封装代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论