ant-design-vue組件的三種加載方式

完整引入

• main.js中全局引入並註冊

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

• 在頁面中再也不須要引入註冊組件，能夠直接使用全部的組件

<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>

<script>
export default {}
</script>

導入部分組件

• 在main.js中導入並註冊須要在項目中使用的組件

import { Button } from "ant-design-vue";
import 'ant-design-vue/lib/button/style/css'
Vue.component(Button.name, Button)

• 在項目中能夠直接使用這個已經註冊的組件

<template>
    <div>
        <a-button type="primary">hello world</a-button>
    </div>
</template>

<script>
export default {}
</script>

按需加載

ant-design-vue使用babel-plugin-import進行按需加載

• 安裝babel-plugin-import插件

npm i babel-plugin-import --save-dev

• 修改.babelrc文件，在plugins節點下，添加下面這個配置項：

"plugins": ["transform-vue-jsx", "transform-runtime",
    [
        "import",
        {
            "libraryName": "ant-design-vue",
            "libraryDirectory": "lib",
            "style": "css"              
        }
    ]
]

• 在須要使用相關組件的頁面引入並註冊便可按需加載

<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>

<script>
import { Button } from 'ant-design-vue';

export default {
    components:{ AButton:Button },
}
</script>