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:'[e-mail]'
}).then(()=>{
   this.$message.success('注冊成功')
})