Qu'est-ce qu'iView dans vue ?

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.

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 '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) Référence à la demande

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

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

Remarque :

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

< dans main.js ou root composant 🎜>② 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: 'babel' },
        	{ test: /\.js$/, loader: 'babel', 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!