ant design在Vue中的两种引用详解

1.完整引入

//完整引入
import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './button';
import 'ant-design-vue/dist/antd.css';
/*阻止启动生产消息 开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。
而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检
查还有一些小的运行时开销，这在生产环境模式下是可以避免的。*/
Vue.config.productionTip = false;
Vue.use(Antd);
new Vue({
    /**/
    render:h => h(App),
    //这里的render: h=> h(App)是es6的写法
    //render函数是vue通过js渲染dom结构的函数createElement约定可以简写为h
    // 转换过来就是：
    // render: function (createElement) {
    //         return createElementApp);
    //     },

}).$mount('#app');
    //$mount(’#app’) ：手动挂载到id为app的dom中的意思
    // 当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；
    // 假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载

2.局部导入组件

import Vue from 'vue';
import { Button，Icon} from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './button';
Vue.use(Button);
Vue.use(Icon);
Vue.component(Button.name, Button);
Vue.config.productionTip = false;
Vue.component(Button.name, Button);
new Vue({
    render: h => h(App),
}).$mount('#app');