vue3 Ant Design Vue按需引入全局 $Message解决

此文章解决两个问题

1.Ant Design Vue按需引入

2.全局$Message 设置 

1.Ant Design Vue按需引入

使用 npm 或 yarn 安装Ant Design Vue

npm i --save ant-design-vue@next
 
yarn add ant-design-vue

安装/配置babel-plugin-import插件

npm install babel-plugin-import -D

安装/配置less+less-loader插件 

npm install less less-loader --save-dev
babel.config.js文件
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",
      {libraryName: "ant-design-vue", libraryDirectory: "es", style: true} // `style: true` 会加载 less 文件
    ]
  ]
}

vue.config.js文件

less-loader ^6.0.X

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true
        }
      }
    }
  }
}

配置需要按需引入的组件
main.js
如果组件多的话可以新建 antd.js 文件, 仅用于引入必须的组件,在main.js文件引入遍历use

import { createApp } from 'vue'
import App from './App.vue'
import { Button} from 'ant-design-vue'
 
const app = createApp(App)
app.use(Button).mount('#app')

 App.vue
 

   <a-button type="primary" ghost>Primary</a-button>
    <a-button >Default</a-button>
    <a-button type="dashed" >Dashed</a-button>
    <a-button type="primary" danger ghost>Danger</a-button>

2.全局$Message 设置 

问题来了 我如果想按需引入Message 这种应该怎么弄呢？？？

通过config.globalProperties 把方法添加到原型链上

const app = createApp(App)
app.config.globalProperties.$Message = Message
app.use(Button).mount('#app')
console.log(app)

页面使用 需要通过getCurrentInstance来获取

import { getCurrentInstance} from 'vue';

 setup(){
    const { proxy } = getCurrentInstance();
    onMounted (()=>{
      proxy.$Message.loading('This is a normal message');
    })
  }

参考连接   

Ant Design Vue按需引入_不羁的程序员~的博客-CSDN博客_antd design vue按需引入

 此文章起源是按需引入之后发生的问题