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

下面操作在main.js文件中进行

完整引入:

import Element from 'element-ui';

//样式文件，需单独引入

import 'element-ui/lib/theme-chalk/index.css';
//在引入前需要npm安装element-ui
Vue.use(Element, { size: 'small' });

属性size取值 ( small ，big ， ) ，决定组件尺寸的大小。

按需引入:

import {
  Pagination,
  Dialog,
  ···省略···
  Footer,
  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui';
//样式文件，需单独引入
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Pagination);

Vue.use(Dialog);

···省略···

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;

转自:https://blog.csdn.net/qq_35393869/article/details/80351487