Quels répertoires sont nécessaires pour la construction de vue

Répertoires requis pour la construction de vue : 1. build (répertoire du script de construction) ; 2. config (répertoire de configuration du projet) ; 3. node_modules (répertoire des modules dépendant du projet) ; , composants (répertoire des composants) et ainsi de suite.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.5.2, ordinateur DELL G3.

Construction du projet VUE et instructions du répertoire

1. Installez l'environnement du nœud

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

　2. l'installation est réussie : Si le numéro de version est affiché, cela signifie que nous avons installé avec succès l'environnement de nœud

　

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

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

　

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

　

Deuxièmement, créez l'environnement du projet vue

　1. Installez vue-cli globalement

npm install --global vue-cli

　

　2. Entrez votre Répertoire du projet, Create un nouveau projet basé sur le modèle WebPack

Vue build ==> Méthode d'emballage, appuyez simplement sur ENTRÉE;

Installer Vue-Router == & gt; - routeur, vous devez l'utiliser dans le projet donc Y Enter ;

　　 Utilisez ESLint pour lint votre code ==> Avez-vous besoin de la détection de syntaxe js Actuellement, nous n'avons pas besoin de n Enter ; > Si configurer les tests e2e avec Nightwatch ==> Avons-nous besoin d'outils de test de bout en bout ? Actuellement, nous n'avons pas besoin de l'outil de test de bout en bout, alors appuyez sur Entrée

　　 3. Entrez dans le projet : cd vue ; - démo, installer les dépendances

　

Après une installation réussie, il y aura un répertoire supplémentaire dans le dossier du projet : node_modules

　　　　4.npm run dev, démarrez le projet

　Projet démarré avec succès :

　

3. Explication du répertoire du projet vue

<br>

　

1. build : répertoire de script de construction

　 1) build.js ==>

　 2) vérifiez -versions.js ==> Vérifiez la version de npm, node.js ;

　　3) utils.js ==> Construisez les méthodes d'outils associées

　 4) vue-loader.conf.js ==> et compilation Ajouter automatiquement un préfixe après css ;

　　5) webpack.base.conf.js ==> Configuration de base de Webpack

　 6) webpack.dev.conf.js ==> webpack .prod.conf.js ==>configuration de l'environnement de production webpack ;

　2.config : configuration du projet

　1) dev.env.js ==> > ; Fichier de configuration du projet ;

　 3) prod.env.js ==> Variable 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 et 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 chemin de routage que nous devons configurer 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, telles que des images, des polices, etc. Il 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, qui définit le script npm du projet, dépendant packages et autres informations <br><br>

　　8、README.md：项目的说明文档，markdown 格式

　　9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

四、开始我们的第一个vue项目

　　1、在components目录下新建一个views目录，里面写我们的vue组件

　　　　1）开始我们的第一个组件：

　　　　a：在views目录下新建First.vue

　　　　b：在router目录下的index.js里面配置路由路径

　　　　

　　　　 c：template 写 html，script写 js，style写样式

　　　

　　　　d：输入ip： http://localhost:8010/#/first，查看页面效果

　　　　

　　　　注意：

　　　　一个组件下只能有一个并列的 p，以下写法是错误：

　　　　

　　　　数据要写在 return 里面，而不是像文档那样子写，以下写法错误：

　　　　

　　2、讲讲父子组件

　　　　1）在components目录下新建sub文件夹，用于存放一下可以复用的子组件。比如新建一个Confirm.vue组件

　　　　

　　　　3）在父组件中引入子组件

　　　　引入：import Confirm from '../sub/Confirm'

　　　　注册：在<script></script>标签内的 name代码块后面加上 components: {Confirm}

　　　　使用：在<template></template>

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

9. Fichiers .xxxx : ce sont quelques fichiers de configuration, y compris la configuration grammaticale, la configuration git Attendez

Quatrièmement, démarrez notre premier projet vue

1. Créez un nouveau répertoire de vues sous le répertoire des composants et écrivez-y nos composants vue

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 html, le script écrit js, le style écrit style

　　

　　d : Entrez l'adresse IP : http://localhost:8010/#/d'abord, vérifiez l'effet de la page

　　

　　Remarque :

　　Il ne peut y avoir qu'un seul p parallèle sous un L'écriture suivante est une erreur :

　　

　　Le les données doivent être écrites dans le retour. Au lieu de l'écrire comme un document, l'écriture suivante est fausse :

　　

　2. Parlons des 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) Introduire le sous-composant dans le composant parent

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　boire dans dans dans dans dans peut dans dans dans sur dans dans sur dans dans dans sur dans dans sur dans dans ses parents Ajouter des composants : {Confirmer}

Utilisation : Ajouter

dans <template></template> Code complet :

　

2) Communication du composant parent-enfant

　 Composant enfant :

　 Composant parent :

🎜🎜🎜 3. Utilisez le routage pour créer une application monopage 🎜🎜 1) Suivez la méthode ci-dessus pour créer un nouveau composant Second.vue 🎜🎜 2) Routage Jump : Aller à la deuxième page🎜🎜　　🎜🎜🎜　　🎜🎜🎜　　Après les sauts d'itinéraire, faites attention aux changements de chemin : 🎜🎜　　🎜🎜 🎜　　　　　　　　　　　　　　　　　　　　　　-cn/🎜 🎜　　4. Comment utiliser moins pour écrire styles🎜🎜　　1) Installez moins de dépendances : npm install less less-loader --save🎜🎜　　🎜🎜🎜　　Après une installation réussie, vous pouvez le voir dans package.json, plus d'ajouts 2 modules : 🎜🎜　　🎜🎜🎜　　2) Écrire moins 🎜🎜　　🎜　🎜🎜🎜🎜5. Supplémentaire🎜🎜🎜

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

　Solution :

　　1) Ouvrez config ==> index.js

　　

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

　　3) Changera autoOpenBrowser à vrai

　　

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

　　

　　 2. Afin d'éviter les conflits de port, vous pouvez également modifier le port, ouvrir le répertoire comme ci-dessus

　　

　　 Modification réussie :

　　

【Recommandations associées : Tutoriel vue.js

】

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!