vue Cli 按需引入Element UI 和全局引用Element UI

全局引用：

一、安装 Element UI

　　npm i element-ui -S

二、在main.js 中引入 element UI

　　import ElementUI from 'element-ui'

　　import 'element-ui/lib/theme-chalk/index.css' //引用 element-ui 样式

　　Vue.use(ElementUI ) //最后要use ElementUI ，不然会报错

（引入成功，最后就可以在各组件页面中使用了）

按需引用：

一、安装 Element UI

　　npm i element-ui -S

二、安装 babel-plugin-component

　　npm install babel-plugin-component -D

三、将 babel.config.js 改成下面那样

module.exports = {

  "presets": [["es2015", { "modules": false }]],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

四、在main.js 中按需引用你要使用的组件，如下：

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import 'element-ui/lib/theme-chalk/index.css' //引入样式，这里是引入全部样式，你也可以单独引入某个组件样式

import { Button } from 'element-ui';

Vue.config.productionTip = false

Vue.use(Button)

new Vue({

  router,

  render: h => h(App),

}).$mount('#app')

（引入成功，最后就可以在各组件页面中使用了）

完整的组件列表和引入方式：

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,

  Spinner,

  Badge,

  Card,

  Rate,

  Steps,

  Step,

  Carousel,

  CarouselItem,

  Collapse,

  CollapseItem,

  Cascader,

  ColorPicker,

  Transfer,

  Container,

  Header,

  Aside,

  Main,

  Footer,

  Timeline,

  TimelineItem,

  Link,

  Divider,

  Image,

  Calendar,

  Backtop,

  PageHeader,

  CascaderPanel,

  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(Spinner);

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(Timeline);

Vue.use(TimelineItem);

Vue.use(Link);

Vue.use(Divider);

Vue.use(Image);

Vue.use(Calendar);

Vue.use(Backtop);

Vue.use(PageHeader);

Vue.use(CascaderPanel);

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 Cli 按需引入Element UI 和全局引用Element UI

相关文章