首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-cli3.0按需引入element-ui组件

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

2023-10-10 10:49:07 作者：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-cli3.0按需引入element-ui组件方式