Construction du projet Vue et tutoriel d'exemple pratique

En raison du processus d'apprentissage relativement doux et des idées techniques novatrices de Vue, il est favorisé par la majorité des développeurs front-end et back-end. Dans le même temps, son API et ses fonctions de liaison de données faciles à comprendre ont également gagné. sa popularité. De nombreux utilisateurs. Cet article explique principalement la construction et la mise en œuvre réelle du projet Vue, il ne couvrira donc pas trop son API et sa syntaxe. Il est conçu pour aider les utilisateurs débutants de Vue à comprendre les étapes et les méthodes de création d'un projet Vue à partir de zéro.

Tout d'abord, avant de construire un projet vue, nous devons comprendre la classification des projets vue. Ici, je les divise principalement en deux catégories : (1) Introduire directement le fichier vue.js (2) Utiliser vue. composants de fichier unique

Selon les deux catégories ci-dessus, introduire directement le fichier vue.js revient à introduire directement jQuery dans la page. De tels projets ont de nombreux défauts et ne peuvent utiliser que certaines API de base et des fonctions limitées. généralement principalement utilisé pour les utilisateurs débutants et les petits projets. Cet article explique principalement le deuxième type de projet Vue construit avec Vue mais avec des composants de fichiers.

Il existe de nombreuses façons de construire un projet vue. Tout d'abord, nous devons utiliser les outils de construction correspondants. Les outils de construction officiellement recommandés incluent principalement webpack et browserify. Ici, je vous recommande d'utiliser webpack pour la construction. Dans le même temps, en plus des outils de construction, nous devons également utiliser des méthodes de construction. Par exemple, nous pouvons utiliser l'échafaudage vue-cli pour générer automatiquement le fichier de répertoire de base du projet vue. Bien sûr, nous pouvons également personnaliser la construction. à partir de zéro.

vue-cli build

Si vous utilisez l'échafaudage vue-cli pour créer un projet vue, il vous suffit de taper les 5 lignes de commandes suivantes pour générer un projet vue simple (la condition préalable est pour installer node .js) :

npm install -g vue-cli
vue init webpack mon-projet
cd mon-projet
npm install
npm run dev

Cette méthode de construction ne convient pas à tous les projets. De nombreux fichiers peuvent ne pas être utilisés dans votre projet, et si vous ne connaissez rien aux fichiers générés automatiquement, il sera très difficile de les maintenir par la suite. Par conséquent, il n'est pas recommandé aux novices d'utiliser vue-cli pour construire. Au lieu de cela, il est recommandé à tout le monde de créer un projet vue à partir de zéro en se référant aux fichiers générés par vue-cli.

Construction personnalisée

Par rapport à la construction vue-cli, la construction personnalisée est beaucoup plus flexible, mais elle nécessite que vous compreniez les étapes et les principes de construction, et les exigences sont également accrues. La construction personnalisée est divisée en étapes suivantes :

Création de fichier/dossier

Création du fichier package.json

Création du fichier de configuration webpack

Création du fichier d'entrée

Écriture du composant Vue

Configuration du routage

fichier package.json

À l'aide de la commande suivante, nous pouvons créer rapidement un fichier package.json :

npm init -y

Modifiez ensuite son élément de configuration de scripts, ajoutez des commandes d'empaquetage et de compression, ajoutez des dépendances et ajoutez les dépendances de projet correspondantes.

fichier de configuration du webpack

Deuxièmement, nous devons créer notre fichier de configuration du webpack. La différence ici par rapport à la construction d'autres projets est que le composant de fichier unique vue doit être chargé à l'aide du chargeur vue-loader. En même temps, utilisez babel-loader convertit la syntaxe ES6

fichier d'entrée

Ici, nous devons écrire le fichier Entry.js de l'adresse du fichier d'entrée configurée dans webpack. La fonction principale est de monter l'application d'instance vue générée sur le nœud DOM avec l'identifiant de l'application

Ensuite, nous avons besoin pour écrire un composant final Simple vue index.vue, placez-le dans le dossier vues

Cet article présente principalement deux façons de créer un projet vue La construction vue-cli et la construction personnalisée ont leur portée et leurs objets applicables. . , chacun doit faire le meilleur choix en fonction du projet et de ses propres conditions. Dans le même temps, il existe de nombreuses configurations fonctionnelles dans la construction personnalisée qui ne sont pas mentionnées dans cet article. Les chaussures pour enfants intéressés peuvent continuer à explorer par elles-mêmes. .

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!