Maison  >  Article  >  interface Web  >  Qu’est-ce qu’iView dans vue ?

Qu’est-ce qu’iView dans vue ?

青灯夜游
青灯夜游original
2020-11-11 11:45:135925parcourir

Dans vue, iView est un ensemble de bibliothèques de composants d'interface utilisateur open source basées sur Vue.js, qui sert principalement les produits middle et back-end de l'interface PC. iView fournit une multitude de composants et de fonctions qui peuvent répondre à la plupart des scénarios de sites Web ; il fournit un système d'administration prêt à l'emploi et une bibliothèque de composants haut de gamme, ce qui permet de réduire considérablement les coûts de développement.

Qu’est-ce qu’iView dans vue ?

iView est un ensemble de bibliothèques de composants d'interface utilisateur open source basées sur Vue.js, qui sert principalement des produits mid-end et back-end pour les interfaces PC. Utilisant le modèle de développement de composants Vue à fichier unique, il est développé sur la base de npm + webpack + babel. Il prend en charge l'API ES2015 de haute qualité, riche en fonctionnalités et conviviale, permettant une utilisation libre et flexible de l'espace. , et est utilisé par de nombreuses sociétés Internet bien connues.

Adresse du site officiel : https://www.iviewui.com/

Caractéristiques d'iView

  • Composants riches et fonctions pour répondre à la plupart des scénarios de sites Web

  • Fournit un système d'administration prêt à l'emploi et une bibliothèque de composants haut de gamme, permettant de réduire considérablement les coûts de développement

  • Fournir une assistance technique individuelle professionnelle et de haute qualité

  • API conviviale, utilisation gratuite et flexible de l'espace

  • Détaillé et beau UI

  • Documentation micro-détaillée

  • Thèmes personnalisables

Installation iView :

1) Utilisez npm :

npm install --save iview

2) Introduction CDN :

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

Introduire iView

1 ) Généralement configuré comme suit dans la page d'entrée du webpack main.js :

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

2) Référence à la demande

L'utilisation de composants à la demande dans le webpack peut réduire la taille du fichier :

import Input from &#39;iview/src/components/input&#39;;

Remarque :

① Les références à la demande doivent toujours importer des styles, c'est-à-dire exécuter import 'iview/dist/styles/iview.css';

② La référence à la demande est une référence directe au code source de la bibliothèque de composants, qui doit être compilé avec babel. Prenons webpack comme exemple :

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

Spécifications d'utilisation des composants<.>Utilisation : lorsque le format de données transmis par prop est un nombre, une valeur booléenne ou une fonction, il doit contenir : (c'est-à-dire utiliser v-bind Sa valeur sera calculée comme une expression JavaScript, sinon elle le sera). être traité comme une chaîne.

Façon correcte d'utiliser :

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

Manière incorrecte d'utiliser :

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

Recommandations associées :


Résumé 2020 de questions d'entretien Front-end Vue (avec réponses)

Recommandation du didacticiel Vue : 2020 dernières sélections de didacticiels vidéo 5 vue.js

Pour en savoir plus connaissances liées à la programmation, veuillez visiter :
Cours vidéo de programmation

 ! !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Qu'est-ce que vue.jsArticle suivant:Qu'est-ce que vue.js