常用Vue组件库，引入对比 | 2018-05-18

[amenzai]

elementUI

// 全部引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 按需引入
import { Button, Select } from 'element-ui';
// 插件配置示例
Vue.use(Button);
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;

按需引入：

npm install babel-plugin-component -D

// .babelrc
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

vux

// 使用插件
import AlertPlugin from 'vux/src/plugins/Alert'
import ToastPlugin from 'vux/src/plugins/Alert'
or
import { AlertPlugin, ToastPlugin } from 'vux'

// 使用组件
import { Group, Cell } from 'vux'

vant

// 全部引入
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';

// 按需引入
import Button from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
or 
import { Button } from 'vant';