vue used ant design

First, how to introduce ant design in the vue

    (1) complete the introduction

• main.jsThe global introduction and registration

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

 

• No longer need to introduce registration component on the page, all components can be used directly

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

<script>
export default {}
</script>

 

(2) introducing portion of the assembly

• In main.jsassembly import and registration is required in the project

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

 

• You can directly use this component has been registered in the project

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

<script>
export default {}
</script>

 

  (3) demand loading

   ant-design-vueUse babel-plugin-importon-demand load

• Install babel-plugin-importplug-ins

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

• Modify .babelrcfiles in pluginsthe next node, add the following configuration items:

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

 

• In page requires registration and related components can be introduced loaded on demand

<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>