Que comprend le bucket de la famille vue.js ?

Le bucket de la famille Vue.js comprend l'échafaudage vue-cli, le routage vue-router, le mode de gestion d'état vuex, axios et le framework d'interface utilisateur. Vue est un framework JavaScript permettant de créer des interfaces utilisateur. Il est construit sur la base des standards HTML, CSS et JavaScript et fournit un ensemble de modèles de programmation déclaratifs et basés sur des composants pour aider les développeurs à développer efficacement des interfaces utilisateur.

Le système d'exploitation de ce tutoriel : système Windows 10, vue version 3.0, ordinateur Dell G3.

Le bucket de la famille Vue.js est composé d'un échafaudage vue-cli, d'un routage vue-router, d'un mode de gestion d'état vuex, d'axios et d'un framework d'interface utilisateur. Vue (prononcé /vjuː/, similaire à view) est un framework JavaScript permettant de créer des interfaces utilisateur. Il est construit sur la base des standards HTML, CSS et JavaScript et fournit un modèle de programmation déclaratif et basé sur des composants pour aider les développeurs à développer efficacement des interfaces utilisateur.

1. Outil de construction de projet : vue-cli

vue-cli est également appelé échafaudage et est officiellement défini comme un outil standard pour le développement de Vue.js. Vue-cli est un système complet de développement rapide basé sur Vue.js, qui peut générer automatiquement des modèles de projet Vue.js+webpack. Vue cli fournit des fonctionnalités puissantes pour personnaliser de nouveaux projets, configurer des prototypes, ajouter des plugins et inspecter les configurations du webpack. La version @vue/cli 3.x peut créer rapidement l'échafaudage d'un nouveau projet via la commande vue create. Elle n'a pas besoin de s'appuyer sur webpack pour construire le projet comme vue 2.x.

Par rapport à l'introduction des balises scirpt, l'échafaudage vue-cli présente les caractéristiques suivantes :

1) Fonctions riches

Fournit une prise en charge prête à l'emploi pour Babel, TypeScript, ESLint, PostCSS, PWA, les tests unitaires et Prise en charge des tests de bout en bout.

2) Facile à étendre

Son système de plug-in permet à la communauté de construire et de partager des solutions réutilisables basées sur des besoins communs.

3) Aucun éjection requis

Vue CLI est entièrement configurable, aucun éjection requis. De cette façon, votre projet peut être maintenu à jour pendant longtemps.

4) Interface graphique sur CLI

Créez, développez et gérez vos projets via l'interface graphique de support.

5) Créez des prototypes instantanément

Utilisez un seul fichier Vue pour mettre en œuvre instantanément de nouvelles inspirations.

6) À l'épreuve du temps

Générez facilement du code ES2015 natif pour les navigateurs modernes, ou créez vos composants Vue en tant que composants Web natifs.

Installation

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

//安装完成后创建一个项目，vue ui为图形化构建，相对简单（推荐）
vue create my-project
# OR
vue ui

2. Gestionnaire de routage : vue-router

vue-router est le gestionnaire de routage officiellement lancé par Vue Il est principalement utilisé pour gérer les URL, réaliser la correspondance entre les URL et les composants, et créer des composants. via des URL. Basculez entre les deux, ce qui facilite la création d'applications d'une seule page. Il présente principalement les fonctionnalités suivantes :

1) Table de routage/vue imbriquée

2) Configuration de routage modulaire basée sur les composants

3) Paramètres de routage, requêtes, caractères génériques

4) Basé sur le système de transition Vue.js Voir la transition effets

5) Contrôle de navigation à grain fin

6) Liens avec classes CSS activées automatiquement

7) Mode historique HTML5 ou mode hachage, automatiquement dégradé dans IE9

8) Barres de défilement personnalisées Comportement

vue Code d'installation du routeur

npm install vue-router
//安装后在mainjs引入
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3. Mode de gestion de l'état : vuex

Dans certains grands projets, nous rencontrons parfois une seule page qui contient un grand nombre de composants et des structures de données complexes, et peut être différente. Les composants affectent également l'état de chacun, dans lequel Dans ce cas, le flux des événements dans l'arborescence des composants peut rapidement devenir très complexe, rendant le débogage extrêmement difficile. Afin de résoudre ce problème, le modèle de gestion d'état de Vuex a été introduit. Vuex est une bibliothèque d'implémentation du modèle de gestion d'état. Elle est principalement utilisée en conjonction avec Vue.js sous la forme d'un plug-in, ce qui nous permet de. gérer des tâches complexes dans Vue.js.

Méthode d'installation de Vuex

npm install vuex --save

4. axios

Axios est une bibliothèque HTTP basée sur des promesses. En termes simples, elle peut envoyer des requêtes get et post.

Fonctionnalités Axios

1) Créer des requêtes XMLHttp à partir du navigateur

2) Créer des requêtes http à partir de node.js

3) Prise en charge de l'API Promise

4) Intercepter les requêtes et les réponses

5) Convertir les données de requête et les données de réponse

6) Capable d'annuler la demande

7) Convertir automatiquement les données JSON

8) Le client prend en charge la défense contre XSRF

Méthode d'installation

npm install axios

ou introduire directement

npm install axios

5. Framework d'interface utilisateur : iview, vant, elementUI

iview est un ensemble de bibliothèques de composants d'interface utilisateur de haute qualité basées sur Vue (divisées en différentes versions telles que l'applet et PC) ;

vant est une bibliothèque de composants mobiles Vue légère et fiable. Il s'agit d'un ensemble de bibliothèques de composants mobiles basés sur Vue 2.0 open source par Youzan. Il est conçu pour rendre le développement plus rapide et plus facile. -utiliser des sites mobiles basés sur Vue.

Ant Design Vue est l'implémentation Vue d'Ant Design, qui développe et sert des produits backend au niveau de l'entreprise.

elementUI est basé sur la bibliothèque de composants intermédiaires et back-end du bureau Vue 2.0.

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!