Verwendung von Ant Design of Vue-Komponenten

Ameisendesign von Vue

Ant Design Vue ist bestrebt, Programmierern ein angenehmes Entwicklungserlebnis zu bieten.

Bevor Sie beginnen, wird empfohlen, sich mit Vue und ES2015 vertraut zu machen und Node.js v8.9 oder höher korrekt zu installieren und zu konfigurieren. Der offizielle Leitfaden geht davon aus, dass Sie über mittlere Kenntnisse in HTML, CSS und JavaScript verfügen und die richtige Vorgehensweise bei der Entwicklung mit Vue vollständig beherrschen. Wenn Sie gerade erst anfangen, Frontend oder Vue zu lernen, ist es wahrscheinlich nicht die beste Idee, als ersten Schritt ein UI-Framework zu verwenden.

charakteristisch

1. Die interaktive Sprache und der visuelle Stil, die aus Mid- und Back-End-Produkten der Unternehmensebene extrahiert wurden.
2. Hochwertige Vue-Komponenten sofort einsatzbereit.
3. TeilenAnt Design of ReactDesign-Tool-System.

Legen Sie schnell los

Stellen Sie Ant-Design-Vue vor

**1. Sicherheits-Beinhandstützen-Werkzeug **
vue-cli

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

**2. Erstellen Sie ein Projekt **
Verwenden Sie die Befehlszeile zum Initialisieren.

$ vue create antd-demo

und konfigurieren Sie das Projekt.

Wenn die Installation langsam ist und ein Fehler auftritt, können Sie versuchen, sie selbst mit cnpm oder anderen Spiegelquellen：rm -rf node_modules && cnpm install zu installieren.

**3. Verwendung von Komponenten **

$ npm i --save ant-design-vue

Vollständige Einführung

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  components: {
    
     App },
  template: '<App/>',
});

Der obige Code vervollständigt die Einführung von Antd. Es ist zu beachten, dass die Style-Datei separat importiert werden muss.

Komponenten lokal importieren

import Vue from 'vue';
import {
    
     Button, message } from 'ant-design-vue';
import App from './App';

Vue.config.productionTip = false;

/* v1.1.2 */
Vue.component(Button.name, Button);
Vue.component(Button.Group.name, Button.Group);

/* v1.1.3+ 自动注册Button下组件，如Button.Group */
Vue.use(Button);

Vue.prototype.$message = message;

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  components: {
    
     App },
  template: '<App/>',
});