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 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应
·
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');
更多推荐
已为社区贡献4条内容
所有评论(0)