Was ist iView in Vue?

In Vue ist iView eine Reihe von Open-Source-UI-Komponentenbibliotheken basierend auf Vue.js, die hauptsächlich Mid- und Back-End-Produkte von PC-Schnittstellen bedienen. iView bietet eine Fülle von Komponenten und Funktionen, die den meisten Website-Szenarien gerecht werden; es bietet ein sofort einsatzbereites Admin-System und eine High-End-Komponentenbibliothek, was die Entwicklungskosten erheblich senkt.

iView ist eine Reihe von Open-Source-UI-Komponentenbibliotheken auf Basis von Vue.js, die hauptsächlich Mid- und Back-End-Produkte für PC-Schnittstellen bedienen. Unter Verwendung des Single-File-Vue-Komponenten-Entwicklungsmodells wird es auf der Grundlage von npm + webpack + babel entwickelt. Es unterstützt die hochwertige, funktionsreiche und benutzerfreundliche API von ES2015 und ermöglicht so eine freie und flexible Nutzung des Speicherplatzes. Es wird von TalkingData entwickelt und verwaltet , und wird von vielen namhaften Internetunternehmen genutzt.

Offizielle Website-Adresse: https://www.iviewui.com/

Funktionen von iView

• Reichhaltige Komponenten und Funktionen für die meisten Website-Szenarien

• Stellen Sie ein sofort einsatzbereites Admin-System bereit und High-End-Komponentenbibliothek, wodurch Entwicklungskosten erheblich gespart werden

• Professioneller und qualitativ hochwertiger persönlicher technischer Support bieten

• Freundliche API, kostenlose und flexible Raumnutzung

• Detaillierte und schöne Benutzeroberfläche

• Detaillierte Dokumentation

• Anpassbare Themes

iView-Installation:

1) NPM verwenden:

npm install --save iview

2) CDN-Einführung:

<link rel="stylesheet" href="css/iview.css">
<script src="js/iview.min.js"></script>

Einführung e iView

1 ) Im Allgemeinen wie folgt konfiguriert auf der Webpack-Eintragsseite main.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue'; // 路由挂载
import Routers from './router.js'; // 路由列表
import iView from 'iview'; // 导入组件库
import 'iview/dist/styles/iview.css'; // 导入样式
Vue.use(VueRouter);
Vue.use(iView);
// 路由配置
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);
new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

2) Referenz bei Bedarf

Die Verwendung von Komponenten bei Bedarf im Webpack kann die Dateigröße reduzieren:

import Input from 'iview/src/components/input';

Hinweis:

① Referenz bei Bedarf ist immer noch Sie müssen importieren Stile, das heißt, führen Sie den Import „iview/dist/styles/iview.css“ in main.js oder der Stammkomponente aus mit Hilfe von Babel kompiliert werden, unter Verwendung von Webpack als Beispiel:

module: {
    	rules: [
        	{ test: /iview.src.*?js$/, loader: 'babel' },
        	{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
    	]
}

Komponentenverwendungsspezifikationen

Wenn Sie: prop verwenden, um das Datenformat als Zahl, booleschen Wert oder Funktion zu übergeben, müssen Sie Folgendes mitbringen: (d. h. use v-bind) und sein Wert wird als JavaScript-Ausdruck berechnet, andernfalls wird er als String behandelt.

Richtige Verwendung:

<Page :current="1" :total="10"></Page>

Falsche Verwendung:

<Page current="1" total="10"></Page>

Verwandte Empfehlungen:

Zusammenfassung der Fragen zum Front-End-Vue-Interview 2020 (mit Antworten)

Vue-Tutorial-Empfehlung: 2020 Neueste 5 Eine Auswahl von vue. js-Video-Tutorials

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmier-Videokurse

! !

Das obige ist der detaillierte Inhalt vonWas ist iView in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!