vue-cli initialise une instance de méthode d'un projet vue.js

Analyse des fichiers .vue empaquetés

Afin de nous permettre de mieux maintenir les composants pendant le développement du projet, vue fournit un système de composants à fichier unique. Vue place chaque composant indépendant dans un fichier vue. des balises personnalisées de base sont fournies dans ce fichier :
1. modèle
2. script
3. , nous devons donc le compiler et le conditionner via webpack. Le responsable fournit un chargeur pour le traitement de .vue : vue-loader

ERREUR dans ./src/Hello.vue

Échec de la construction du module : Erreur : Impossible find module 'vue-template-compiler'

Vue est en fait développé à l'aide d'un système à composant unique .vue, mais il ne peut pas s'adapter aux besoins complexes réels. Nous devons encore beaucoup configurer Certaines choses sont intégrées avec . vue. Cette configuration est très lourde, donc le responsable fournit un outil pour nous aider à créer du contenu qui doit être utilisé dans le processus de développement d'un projet. Cet outil : vue-cli, grâce à cet outil, nous pouvons Il est très pratique de créer. un projet basé sur vue Nous appelons également cet outil --- échafaudage

installation

npm install vue-cli -g (global)

ou
yarn global add vue-. cli

Après avoir installé l'échafaudage vue via la méthode ci-dessus, nous pouvons utiliser une commande dans la ligne de commande : vue (cette commande n'a pas -cli)

Utilisation de vue

vue init

init : Initialiser (créer) un projet basé sur vue

vue init webpack hello : Construire un projet nommé hello basé sur le projet webpack vue (la construction du projet doit être en ligne ! Réseau ! Réseau !)

vue-cli est une ligne de commande interactive. Construire le projet via la commande vue nous demandera de renseigner certaines informations sur le projet :

Nom du projet : Le nom du projet à créer. créé (cette commande produira un fichier package.json. L'option de nom dans le fichier est ProjectName. La valeur par défaut est le nom du répertoire de projet actuellement créé. Vous pouvez également le créer vous-même (mais il doit être conforme au nom de dénomination règles dans package.json. N'utilisez pas de majuscules, d'espaces ou de traits de soulignement. Vous pouvez utiliser - )

Description du projet : introduction du projet, qui apparaîtra également dans le fichier package.json, facultatif

<.>Auteur : auteur, facultatif

À l'étape suivante, appuyez simplement sur Entrée

Installer vue-router : s'il faut installer le composant de routage vue Si vous réalisez un projet, vous devez l'installer. it

Utilisez ESLint pour lint votre code : avez-vous besoin d'utiliser ESLint ? Module pour la détection de code

Configurer des tests unitaires avec Karma + Mocha ? : S'il faut installer des tests (tests unitaires)

Configurer les tests e2e avec Nightwatch ? : S'il faut installer des tests de bout en bout

Terminez les étapes ci-dessus, c'est terminé !

Après avoir terminé la configuration via vue-cli, l'étape suivante consiste à installer les packages de dépendances requis par vue. Les packages de dépendances que le projet doit installer sont décrits dans le fichier package.json généré automatiquement par vue. Outil -cli :

dépendances : packages de dépendances réellement nécessaires dans le projet

devDependencies : certaines boîtes à outils nécessaires pendant le processus de développement du projet, qui ne font pas partie du code en ligne réel du projet

Exécuter

Une fois les packages de dépendances d'installation requis installés, vous pouvez démarrer le projet et exécuter

yarn run dev / npm run dev : ouvrez un environnement de développement de test

Yarn Run build : construisez le projet et emballez le projet, nous pouvons télécharger les fichiers de projet emballés sur le serveur

S'il s'agit de la première exécution, vous verrez une page de bienvenue, puis nous pourrons développer le projet

🎜>

Structure du projet

• répertoire build : quelques fichiers de script et fichiers de configuration nécessaires à la construction de la commande du projet

• répertoire config : un le petit sera automatiquement installé dans vue-cli Le serveur web de rechargement à chaud construit par express, la config contient la configuration pertinente de ce serveur

• répertoire dist : le répertoire de stockage après le projet est compilé et construit en ligne

• répertoire node_modules : répertoire de stockage du package de dépendances du projet

• répertoire src : répertoire de stockage du code source du projet

• Répertoire statique : répertoire de stockage de ressources statiques

Pendant le processus de développement du projet, la plupart de nos tâches sont effectuées dans le répertoire src

• main.js : Le fichier d'entrée configuré dans le projet généré automatiquement par vue scaffolding Dans ce fichier d'entrée, un travail d'initialisation du projet est effectué

• .

  Introduire Vue

• Introduire les composants nécessaires

• Créer une instance Vue

Routage

Lorsque notre application devient complexe, le nombre de pages impliquées augmentera également et la logique deviendra plus complexe. Il s'avère que nous organisons et maintenons notre site Web à travers plusieurs pages, mais ce type d'utilisateur. l'expérience n'est pas très bonne (car la page sera actualisée ou sautée). Afin de résoudre le problème de l'expérience utilisateur, le meilleur moyen est d'utiliser les données (la page changera), mais il n'est pas nécessaire de sauter ou d'actualiser.

• Obtenez des données de manière asynchrone via ajax sans actualisation

• Après avoir obtenu les données, traitez-les et gérez-les via vue et affichez la page

Dans quelles circonstances obtenez-vous les données pour afficher la page ? Méthode de traitement traditionnelle : renvoyez la demande via l'URL pour obtenir de nouvelles données et pages. Les données de page à obtenir sont déterminées par l'URL. Si vous utilisez le mode de développement d'une seule page, vous ne pouvez plus utiliser de sauts de page, mais vous pouvez utiliser. la valeur de hachage dans l'URL change pour déterminer le contenu à obtenir et la page à afficher.

Donc le hachage d'une url correspond à une vue, alors nous devons définir la relation entre le hachage et la vue. Nous pouvons établir une relation correspondante (mapping) entre le hachage et la vue
- Définir la carte de. Relation hash-view (Mappage)
- Surveiller les changements de hachage
- Lorsque la valeur de hachage change, recherchez le composant correspondant en fonction de la carte pour restituer la vue

Vue nous fournit un tiers framework pour implémenter la fonction ci-dessus : vue-router

Le mappage adresse-vue que nous avons mentionné ci-dessus : routage

Recommandations associées :

La simplicité de développer des multi- applications de page avec vue-cli Exemple

vue-cli écrivant une instance de plug-in vue

Comment utiliser le routage dans vue-cli

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!