Comment créer un projet avec vue.js

Méthode de création : 1. Installez l'environnement de nœud ; 2. Utilisez la commande "npm install --global vue-cli" pour installer globalement vue-cli 3. Utilisez la commande "vue init webpack project name" ; pour créer le projet ; 4. , entrez le projet et utilisez la commande "cnpm i" pour installer les dépendances.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, vue version 2.9. Cette méthode convient à toutes les marques d'ordinateurs.

Recommandations associées : "Tutoriel vue.js"

1. Installer l'environnement de nœud

　1. L'adresse de téléchargement est : https://nodejs.org/en/

　2.

Vérifiez si l'installation a réussi : si le numéro de version est affiché, il signifie que nous avons installé l'environnement de nœud avec succès

　

3. Afin d'améliorer notre efficacité, nous pouvons utiliser le miroir de Taobao : http://npm.taobao.org/

Entrez : npm install -g cnpm –registry=https://registry.npm.taobao.org, vous pouvez installer l'image npm si vous utilisez npm à l'avenir, utilisez simplement cnpm à la place.

　

Vérifiez si l'installation a réussi :

1. Installez globalement vue-cli npm install --global vue-cli

　2. Entrez le répertoire de votre projet, Créer un nouveau projet basé sur le modèle webpack : vue init nom du projet webpack

　 Instructions :

Vue build ==> Méthode d'empaquetage, appuyez simplement sur Entrée ;

Installer vue-router ==> ; Si vous souhaitez installer vue-router, vous devez l'utiliser dans le projet, alors appuyez sur Entrée

　 Utilisez ESLint pour lint votre code ==> Avez-vous besoin d'une détection de syntaxe js ? Actuellement, nous n'avons pas besoin d'appuyer sur Entrée ; outils dont nous n'avons pas besoin actuellement, donc n Appuyez sur Entrée ;

　 Configurer les tests e2e avec Nightwatch ==> Si nous avons actuellement besoin d'outils de test de bout en bout Nous n'avons pas besoin d'appuyer sur Entrée

3. Entrez le projet : cd vue-demo, installez les dépendances

Une fois l'installation réussie, il y aura un répertoire supplémentaire : node_modules

4. npm run dev, démarrez le projet

Le projet démarre avec succès :

3. Explication du répertoire du projet vue

　

　1. build : Répertoire de script de construction <br>

1) build.js ==> ; ="langue-text">　 2) check-versions.js ==> Vérifiez npm, version du nœud .js

3) utils.js ==> Construire les méthodes d'outils associées ; <br>

4) vue-loader.conf ==> et ajoute automatiquement des préfixes après avoir compilé le CSS

5) webpack.base.conf.js ==> Configuration de base de Webpack ; ) webpack.dev.conf.js ==> configuration de l'environnement de développement Webpack ;

7) webpack.prod.conf.js == >

　2.config : configuration du projet

　1) dev.env.js ==> Variables d'environnement de développement

　2) index.js ==> ) prod.env.js ==> Variables d'environnement de production ;

3. node_modules : modules dépendants du projet chargés par npm

4. src : Voici le répertoire que nous voulons développer, en gros. Tout ce que vous devez faire se trouve dans ce répertoire. Il contient plusieurs répertoires et fichiers :

1) actifs : répertoire de ressources, où sont placées certaines images ou public js ou public css. Les ressources ici seront construites par webpack ;

2) composants : répertoire des composants, les composants que nous écrivons sont placés dans ce répertoire

3) routeur : routage front-end, le routage que nous avons ; besoin de configurer Le chemin est écrit dans index.js ;

4) App.vue : composant racine

5) main.js : fichier js d'entrée

5 . static : répertoire de ressources statiques, tel que des images, des polices, etc. Ne sera pas construit par webpack

6. index.html : fichier d'entrée de la page d'accueil, vous pouvez ajouter des méta-informations, etc.

7. package.json : fichier de configuration du package npm, définit le script npm du projet, les packages dépendants et autres informations

8. README.md : document de description du projet, format markdown <br>

9. Fichiers .xxxx : Ce sont quelques fichiers de configuration , y compris la configuration de la syntaxe, la configuration de git, etc.

4. Démarrez notre premier projet vue

1. Créez une nouvelle vue sous le répertoire des composants. Écrivez notre composant vue à l'intérieur de

1) Démarrez notre premier composant :

a : Créez un nouveau First.vue. dans le répertoire des vues

b : Configurez le chemin de routage dans index.js dans le répertoire du routeur

　c：Le modèle écrit du HTML, le script écrit du js, le style écrit le style

　

　d : Entrée ip : http://localhost:8010/#/premier, vérifiez l'effet de page

　

　

Remarque :

Il ne peut y avoir qu'un seul div parallèle sous un composant. L'écriture suivante est fausse :

Les données doivent être écrites dans la déclaration plutôt que comme un document. L'écriture suivante est erronée :

. 2. Dites-moi les composants parent-enfant

1) Créez un nouveau sous-dossier dans le répertoire des composants pour stocker les sous-composants réutilisables. Par exemple, créez un nouveau composant Confirm.vue

　

　3) Introduisez le sous-composant

dans le composant parent Introduction : importer Confirm from '../ sub/Confirm'

Enregistrement : Ajoutez des composants : {Confirm>

après le bloc de code de nom dans la balise

Utilisation : Ajoutez > <script></script>

Code complet :

<template></template>

Composant parent :

　2) Saut d'itinéraire : Go vers la deuxième page

　

　

Après le saut de routage, faites attention aux changements de chemin :

🎜>　

　 Voici juste une brève introduction à l'utilisation du routage. Pour plus de détails, veuillez vous rendre sur le site officiel pour apprendre : https://router.vuejs.org/zh-cn/

4. Comment écrire des styles avec moins

1) Installez moins de dépendances : npm install less less-loader --save

Installé avec succès Ensuite, vous pouvez voir dans package.json que 2 modules supplémentaires ont été ajouté :

　

　2) Écrivez moins

　

5. >

1. Résolvez le problème selon lequel vue ne peut pas ouvrir automatiquement le navigateur : Lorsque nous entrons dans npm run dev, exécutez le projet, la ligne de commande nous indique que l'opération a réussi, mais le Le navigateur ne s'ouvre pas automatiquement, nous ne pouvons donc le saisir que manuellement.

Solution :

1) Ouvrez config ==> index.js

　2) Recherchez autoOpenBrowser dans la configuration module.exports, le paramètre par défaut est false　

　3) Remplacez autoOpenBrowser par true

　

　4) Ctrl+C, puis on redémarre et le navigateur s'ouvrira automatiquement

　

2 . évitez les conflits de port, vous pouvez également modifier le port. Ouvrez le répertoire comme ci-dessus

　

Enfin, l'adresse de démonstration est jointe : https : //github.com/yanxulan/vue-demo.gitPour plus de connaissances liées à la programmation, veuillez visiter :Cours d'apprentissage en 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!