vue.js脚手架项目中，关于按需引入与完整引入element-ui的方法

element-ui引入方式，简单说来有两种：完整引入、按需引入

首先谈一下npm安装element-ui的方法：

cmd到项目目录，然后执行cmd命令：npm i element-ui -S 稍等片刻，这样就安装OK了。

[起初node_modules在单项目文件内]，其实后面完全可以剔出来，方便多个项目公共使用！

 

下面就这两种方式，简单说一下如何操作，详细请参考官网相关文档；

 

1. 完整引入

import Element from 'element-ui';
//样式文件，需单独引入
import 'element-ui/lib/theme-chalk/index.css';

 

对应的代码，如下：

Vue.use(Element, { size: 'small' });

 

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

 

2. 按需引入

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;

 

以上就是本文的简单介绍。