vue中按需使用第三方插件

基于vue-cli3

1.安装element-ui 和按需加载插件

cnpm install element-ui babel-plugin-component --save-dev

2.添加配置,在根目录新建babelrc，需要重启服务

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "thecnpmme-chalk"
      }
    ]
  ]
}

3.在main.js引入element-ui的message组件

import { Message  } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

4.插件有两种使用方式,一种是在组件中需要使用插件的地方按需引入

 import { Message  } from 'element-ui';

 delProduct(item){
      this.axios.delete(`/carts/${item.productId}`).then((res)=>{
        Message.success('删除成功');
        this.renderData(res);
      });
   },   

5.另一种是使用prototye把插件的对象扩展进来　　

main.js:
// 通过原型的方式扩展对象,绑定message:
Vue.prototype.$message=Message;

如果是组件的话可以绑定全局component,具体参照官方文档
https://element.eleme.cn/#/zh-CN/component/quickstart
Vue.component(Button.name, Button);

6.使用方式

 this.axios.post('/user/register',{
    username:'admin1',
    password:'admin1',
    email:'admin1@163.com'
}).then(()=>{
   this.$message.success('注册成功')
})