vue按需引入iview-UI库pc端vue

npm install babel-plugin-import --save-dev

借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。
首先安装，并在文件 .babelrc 中配置：

// .babelrc配置文件添加如下代码：
{
“plugins”: [[“import”, {
“libraryName”: “iview”,
“libraryDirectory”: “src/components”
}]]
}

在main.js中按需调用

import 'iview/dist/styles/iview.css';
import { 
    Button, 
    Icon,
    Message,
    Alert,
    Notice,
    Spin,
} from 'iview';

// 注册为组件
Vue.component('Button', Button);
Vue.component('Icon', Icon);
Vue.component('Alert', Alert);

//以下三个组件，不能用component注册，
//需要把属性绑到Vue实例上，即在main.js里面 import以后，这样注册
Vue.prototype.$Message = Message
Vue.prototype.$Notice = Notice
Vue.prototype.$Spin = Spin

在组件中使用方式

this.$Message.info('This is a info tip');

this.$Notice.open({
    title: '标题',
    desc: '内容'
});

this.$Spin.show();
setTimeout(() => {
    this.$Spin.hide();
}, 3000);

axios.js文件中使用方式

//需要在axios.js单独引入
import { 
    Message,
    Alert,
    Notice,
    Spin,
} from 'iview';

//使用：
Message.info('This is a info tip');
Spin.show();