Is antd suitable for use with vue?

antd is suitable for vue, because ant design has a vue version, and the corresponding name is "ant-design-vue"; you can use the "npm i --save ant-design-vue" command in the vue project Just install and use it.

The operating environment of this article: windows7 system, vue2.0 version, Dell G3 computer.

The vue version of ant design - introduction to ant-design-vue

ant-design-vue is the only Vue version UI component officially recommended by Ant Design of Ant Financial Library, it is actually the Vue implementation of Ant Design. The style of the component is synchronized with Ant Design, and the html structure and css style of the component are also consistent. After using it, I found that it is indeed one of the few complete VUE component library and development solution integration projects.

Official website:

https://www.antdv.com/docs/vue/introduce-cn/

Advantages:

Extracted from enterprise level Interaction language and visual style for mid- and back-end products.

High quality Vue components out of the box.

Share the Ant Design of React design tool system.

Global introduction of ant-design-vue

1. First create a vue project using vue’s scaffolding tool vue-cli

2. Install ant-design-vue

Use the command line tool, switch to the project path, and use the command [npm i --save ant-design-vue] to install, as shown below

1.png

3. Global introduction

(1) Complete introduction

Global introduction and registration in main.js

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

There is no need to introduce registration components in the page, you can directly Use all components

<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>
<script>
export default {}
</script>

(2) Import some components

Import and register the components that need to be used in the project in main.js

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

You can directly Use this registered component

<template>
    <div>
        <a-button type="primary">hello world</a-button>
    </div>
</template>
<script>
export default {}
</script>

Recommended: "vue tutorial"

The above is the detailed content of Is antd suitable for use with vue?. For more information, please follow other related articles on the PHP Chinese website!