vue-cli3.0 introduces element-ui component on demand

vue-cli3.0 introduces element-ui components on demand

1.Introduce vue add element

How do you want to import Element?-->SelectImport on demand(key)

Choose the locale you want to load–>Selectzh-CN

2. After pressing, the system will automatically configure the import

src\plugins\
Automaticallyel-buttonAs an example

src\plugins\Modify

byCarousel The revolving * is an example

import { Carousel, CarouselItem } from 'element-ui'
(Carousel)
(CarouselItem)

Complete list of components and how to introduce them

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';
(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 = ;
.$msgbox = MessageBox;
.$alert = ;
.$confirm = ;
.$prompt = ;
.$notify = Notification;
.$message = Message;

vue-cli3.0 uses cdn to introduce element-ui

Generally, the packaged files are quite large after the project is written, so those commonly used and unchanged use cdn to reduce the volume of the package. This example uses vue-cli3.0. First configure externals

  = {
 Vue: "Vue",
 Vuex: "Vuex",
 "element-ui": "ELEMENT",
 moment: 'moment',
 echarts: 'echarts'
 }

Add in

<script src="/vue/2.6.10/"></script>
 <script src="/vuex/3.0.1/"></script>
 <link href="/element-ui/2.4.5/theme-chalk/" rel="external nofollow"  rel="stylesheet">
 <script src="/element-ui/2.4.5/"></script>
 <script src="//2.24.0/"></script>
 <script src="/echarts/4.2.1/"></script>

Remove import xxx from 'xxx'. Here, the xxx refers to what you want to introduce with cdn. The above has been completed. If you want to use the element-ui Message module, use the following. The above external must be written in "element-ui": "ELEMENT". Just click it out directly with the module.

('success'); // ELEMENTBecome a global variable ?Must follow the above ?"element-ui": "ELEMENT"

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.