全局引用:

一、安装 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的更多相关文章

  1. vue中按需引入Element-ui

    安装 1.安装element-ui:npm i element-ui -S. 2.安装babel-plugin-component:npm install babel-plugin-component ...

  2. Vue ElementUI 按需引入

    一.element UI组件的单独使用(第一种方法): 1.cnpm install babel-plugin-component -D         2.找到.babelrc 配置文件       ...

  3. vue+elementui按需引入

    转载自以下网址,仅作备忘之用:https://www.cnblogs.com/lwj820876312/p/9169457.html 基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 ...

  4. vue中按需引入mint-UI报Error: .plugins[3][1] must be an object, false, or undefined

    { "presets": ["@babel/preset-env", "@babel/preset-react"], "plugi ...

  5. 手把手教你如何安装使用webpack vue cli

    1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...

  6. 如何在Vue中建立全局引用或者全局命令

    1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.u ...

  7. vue的全局引用

    1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.u ...

  8. 在Vue项目中使用Element UI:按需引入和完整引入

    下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...

  9. vue按需引入Element UI的方法

    在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...

随机推荐

  1. 爬虫学习笔记2requests库和beautifulsoup4库学习笔记

    目录 1.requests库 1.1 安装 2.beautifulsoup4 2.1 常用方法 2.2 bs4 中四大对象种类 2.3 遍历文档树 2.4 搜索文档树 查询id=head的Tag 查询 ...

  2. VTK坐标系统及视图分割

    计算机图像学里广泛应用的坐标系统有四种,分别是:模型坐标系统(model),世界坐标系统(world),视图坐标系统(view)和显示坐标系统(display). 模型坐标系统就是定义模型时所用的坐标 ...

  3. android 根据坐标返回触摸到的View

    //根据坐标返回触摸到的Viewprivate View getTouchTarget(View rootView, int x, int y) { View targetView = null; / ...

  4. SpringBoot整合WEB开发--(五)自定义错误页

    目的与原理: 处理异常时,若我们想根据实际情况返回不同的页面,@ControllerAdvice与@ExceptionHandler,一般用于处理应用级别的异常,一些容器级别的错误就处理不了,例如Fi ...

  5. git add 时忽略某些文件或者文件夹

    1.git bash 新建  .gitignore文件 touch .gitignore 2.修改.gitignore文件,如下 target/ !.mvn/wrapper/maven-wrapper ...

  6. 一点点学习PS--实战四

    本节实战,较为基础,主要是设置画布大小.字体的输入 1.工具使用 文字工具:直排文字工具,竖排文字 2.重点: (1)画影子: ----人物图层拷贝,CTRL+T,右键选择垂直翻转,拖拽出来,即可得到 ...

  7. [一本通学习笔记] RMQ专题

    傻傻地敲了好多遍ST表. 10119. 「一本通 4.2 例 1」数列区间最大值 #include <bits/stdc++.h> using namespace std; const i ...

  8. 剑指offer 面试题 删除链表中重复的节点

    题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...

  9. AcWing 907. 区间覆盖

    //1.将所有区间按照左端点从小到大排序 //2.从前往后依次枚举每个区间 //首先选择能够覆盖左端点的区间当中右端点最靠右的端点 //在所有能覆盖start的区间当中,选择右端点最大的区间 //选完 ...

  10. php设计模式之单例实例代码

    <?php header("Content-type:text/html;charset=utf-8"); /** * 第一步,分别实例化 */ /*class Single ...