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 better-scroll插件使用详解

    vue better-scroll插件使用详解

    本篇文章主要介绍了vue better-scroll插件使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue项目中使用axios上传图片等文件操作

    vue项目中使用axios上传图片等文件操作

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作,需要的朋友参考下吧
    2017-11-11
  • Vue实现各种动态路由生成的技巧分享

    Vue实现各种动态路由生成的技巧分享

    Vue.js是一种流行的JavaScript框架,用于构建用户界面,Vue具有灵活的路由功能,可以根据特定需求动态生成路由,本文将介绍Vue动态路由生成的常见实现方法,并提供相应的源代码示例,需要的朋友可以参考下
    2025-07-07
  • 如何利用vue3实现放大镜效果实例详解

    如何利用vue3实现放大镜效果实例详解

    最近有项目需要用到对图片进行局部放大,类似淘宝商品页的放大镜效果,经过一番研究功能可用,下面这篇文章主要给大家介绍了关于如何利用vue3实现放大镜效果的相关资料,需要的朋友可以参考下
    2021-09-09
  • el-table表头根据内容自适应完美解决表头错位和固定列错位

    el-table表头根据内容自适应完美解决表头错位和固定列错位

    这篇文章主要介绍了el-table表头根据内容自适应完美解决表头错位和固定列错位,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue PC前端扫码登录功能实现

    Vue PC前端扫码登录功能实现

    最近在做APP客户端扫描PC端二维码登录,于是记录一下实现过程,下面这篇文章主要给大家介绍了关于Vue PC前端扫码登录功能实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Vue利用vue-baidu-map实现获取经纬度和搜索地址

    Vue利用vue-baidu-map实现获取经纬度和搜索地址

    在开发项目的时候,发现需要获取经纬度,由于这个项目是用vue写的,最后决定使用vue-baidu-map来快速获取经纬度,感兴趣的可以了解一下
    2022-09-09
  • electron-builder打包vue2项目问题总结

    electron-builder打包vue2项目问题总结

    这篇文章主要介绍了electron-builder打包vue2项目问题总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08
  • 详解实现vue的数据响应式原理

    详解实现vue的数据响应式原理

    这篇文章主要介绍了详解实现vue的数据响应式原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 在 Vue 中使用 iframe 嵌套页面的步骤

    在 Vue 中使用 iframe 嵌套页面的步骤

    这篇文章主要介绍了在 Vue 中使用 iframe 嵌套页面,使用 iframe 技术可以实现多个页面之间的数据传递和交互,提高了网站的整体性能和用户体验,需要的朋友可以参考下
    2023-05-05

最新评论