La vue ant-design peut-elle être utilisée ?

La vue de conception de fourmis est disponible. ant design vue est une bibliothèque de composants d'interface utilisateur de haute qualité implémentée à l'aide de Vue qui suit les spécifications de conception Ant Design et est utilisée pour développer et servir des produits milieu et back-end au niveau de l'entreprise.

L'environnement d'exploitation de cet article : système Windows10, vue 2.9, ordinateur Thinkpad T480.

Recommandé : "Tutoriel vue"

Ant Design Vue est une bibliothèque de composants d'interface utilisateur de haute qualité implémentée à l'aide de Vue qui suit les spécifications de conception Ant Design et est utilisée pour développer et servir des produits milieu et back-end de niveau entreprise.

Caractéristiques

Extraites du langage interactif et du style visuel des produits mid-end et back-end de niveau entreprise.

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

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

Environnements pris en charge

Navigateurs modernes et IE9 et supérieur (nécessite des polyfills).

Prend en charge le rendu côté serveur.

Installation

Utilisez npm ou fil pour installer

Nous vous recommandons d'utiliser npm ou fil pour le développement, ce qui permet non seulement un débogage facile dans le développement environnement, mais également Vous pouvez le conditionner et le déployer en toute sécurité dans l'environnement de production et profiter des nombreux avantages apportés par l'ensemble de l'écosystème et de la chaîne d'outils.

$ npm install ant-design-vue --save
$ yarn add ant-design-vue

Si votre environnement réseau n'est pas bon, il est recommandé d'utiliser cnpm.

La bibliothèque de composants utilise les nouvelles fonctionnalités de vue slot-scope (nouveau dans la version 2.5.0), provide/inject (nouveau dans la version 2.2.0)

Introduction au navigateur

Utiliser le script et des balises de lien pour introduire directement les fichiers dans le navigateur, et utiliser la variable globale antd.

Nous fournissons antd.js antd.css et antd.min.js antd.min.css dans le répertoire ant-design-vue/dist du package de version npm. Vous pouvez également le télécharger via https://www.jsdelivr.com/package/npm/ant-design-vue ou UNPKG.

Il est fortement déconseillé d'utiliser des fichiers construits, qui ne peuvent pas être chargés à la demande, et il est difficile d'obtenir une prise en charge rapide des corrections de bugs pour les modules dépendants sous-jacents.

Remarque : vous devez vous présenter vous-même avant d'introduire antd.js.

Exemple

import Vue from 'vue'
import { DatePicker } from 'ant-design-vue';
Vue.component(DatePicker.name, DatePicker)

Présentation des styles :

import 'ant-design-vue/dist/antd.css';  // or 'ant-design-vue/dist/antd.less'

Chargement à la demande

Les deux méthodes suivantes peuvent charger uniquement les composants utilisés.

Utilisez babel-plugin-import (recommandé).

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

Remarque : webpack 1 ne nécessite pas de définir libraryDirectory.

Ensuite, importez simplement le module depuis ant-design-vue, pas besoin d'importer les styles séparément. C'est équivalent à la méthode d'introduction manuelle ci-dessous.

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'ant-design-vue';

Introduit manuellement

import DatePicker from 'ant-design-vue/lib/date-picker';  // 加载 JS
import 'ant-design-vue/lib/date-picker/style/css';        // 加载 CSS
// import 'ant-design-vue/lib/date-picker/style';         // 加载 LESS

À propos d'ant-design-vue

Comme nous le savons tous, Ant Design a été lancé en tant que langage de conception et est devenu au fil de nombreuses années d'itérations et d'accumulation, ses idées de conception d'interface utilisateur sont devenues un ensemble de normes de facto, recherchées et appréciées par de nombreux développeurs front-end et entreprises, et c'est également une arme magique entre les mains des développeurs React. J'espère que ant-design-vue pourra permettre aux développeurs Vue de profiter de l'excellent design d'Ant Design.

ant-design-vue est l'implémentation Vue d'Ant Design. Le style du composant est synchronisé avec Ant Design. La structure html et le style CSS du composant sont également cohérents. style, et l'API du composant est également conservée autant que possible.

Ant Design Vue s'engage à offrir aux programmeurs une expérience de développement agréable.

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!