Antd est-il adapté à une utilisation avec vue ?

antd convient à vue, car ant design a une version vue et le nom correspondant est "ant-design-vue" vous pouvez utiliser la commande "npm i --save ant-design-vue" ; dans le projet vue Installez-le et utilisez-le.

L'environnement d'exploitation de cet article : système Windows7, version vue2.0, ordinateur Dell G3.

Version Vue de ant design - introduction à ant-design-vue

ant-design-vue est le seul composant d'interface utilisateur de la version Vue officiellement recommandé par Ant Design of Ant Financial Library, il s'agit en fait de l'implémentation Vue d'Ant Design. Le style du composant est synchronisé avec Ant Design, et la structure html et le style css du composant sont également cohérents. Après l'avoir utilisé, j'ai découvert qu'il s'agissait en effet de l'un des rares projets complets d'intégration de bibliothèques de composants VUE et de solutions de développement.

Site officiel :

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

Avantages :

Extrait de l'entreprise niveau Langage interactif et style visuel pour les produits mid-end et back-end.

Composants Vue de haute qualité prêts à l'emploi.

Partagez le système d'outils de conception Ant Design de React.

Introduction globale d'ant-design-vue

1. Créez d'abord un projet vue à l'aide de l'outil d'échafaudage de vue vue-cli

2. Installez ant-design-vue

Utilisez l'outil de ligne de commande, passez au chemin du projet et utilisez la commande [npm i --save ant-design-vue] pour installer, comme indiqué ci-dessous

1.png

3. Introduction globale

(1) Introduction complète

Introduction globale et enregistrement dans main.js

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

Il n'est pas nécessaire d'introduire des composants d'enregistrement dans la page, vous pouvez directement Utiliser tous les composants

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

(2) Importer certains composants

Importer et enregistrer les composants qui doivent être utilisés dans le projet dans main.js

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

peut être directement utilisé dans le projet Utiliser ce composant enregistré

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

Recommandé : "

tutoriel vue"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!