vue2+ant-design-vue的使用—＞全局引入

vue2+ant-design-vue的使用—>全局引入

使用背景：vue-cli@3创建vue2项目+node （14版本）

快速上手

• 创建项目—不再赘述

• 安装ant-design npm i --save ant-design-vue@1.7.8 这里需要指定antd-vue的版本号，不然会出现错误（挺多的，就不说了）。

• 在main.js中引入

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

• 在组件中使用

  <template>
    <div id="app">
      <a-button type="primary">Button></a-button>
    </div>
  </template>
  

至此已经可以使用了，但是每使用一个组件皆需引入一下，会非常麻烦，所以下边进行全局引入

• main.js中修改

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  //import Button from 'ant-design-vue/lib/button';  删除
  import Antd from 'ant-design-vue';   //增加
  import 'ant-design-vue/dist/antd.css';
  Vue.use(Antd)  //Vue.use(Button)修改
  Vue.config.productionTip = false
  
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
  

• 在组件中使用。