Maison > Article > interface Web > Configuration de la structure des dossiers dans vue
Cet article résume et présente principalement les informations pertinentes sur la configuration de la structure des dossiers du projet Vue. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. apprenez avec l’éditeur ci-dessous.
Avant-propos
J'utilise vue pour développer le système de gestion backend depuis un certain temps, et en cours d'exploration, j'ai été je travaille sur la vue elle-même, la modularisation et la standardisation. J'ai une compréhension plus profonde du développement, et maintenant je l'enregistre, j'espère que cela sera utile à d'autres personnes qui ont besoin de développer des projets.
Un environnement de développement front-end basé sur vue.js, utilisé pour le développement d'applications d'une seule page après la séparation du front-end et du back-end. Les dernières fonctionnalités du langage telles que ES Next et scss peuvent être utilisées. pendant le développement. Apprenons avec l'éditeur ci-dessous.
Configuration du projet
Tout d'abord, après avoir déterminé le framework et la bibliothèque de composants à utiliser, vous devez d'abord en avoir une compréhension générale et être fondamentalement familier avec la documentation. Les éléments suivants sont utilisés dans ce développement : vue, vuex, axios, elementUI.
Ensuite, vous pouvez suivre les directives officielles et utiliser vue-cli pour construire un projet vue Dans le projet, essayez de le modifier selon le document ci-dessus pour approfondir votre compréhension :
# 安装依赖库,建议指定 vue 和 element 版本,避免版本升级带来意料之外的 bug $ npm install vue@2.1.6 element-ui@1.4.6 vuex axios #全局安装脚手架 $ npm install -g vue-cli # 创建一个基于 webpack 模板的新项目my-project $ vue init webpack my-project # 进入项目目录 $ cd my-project # 安装依赖 $ npm install # 运行项目 $ npm run devAprès l'exécution, vous verrez la page suivante Indique que l'environnement du projet est construit avec succès :
Structure du projet
Une fois la construction réussie, utilisez l'éditeur pour ouvrir le projet. Le répertoire est grossièrement structuré comme ceci : La signification des fichiers et dossiers associés :.gitignore : Spécifiez les fichiers ignorés par git, et toutes les opérations git ne prendront pas effet sur eux
.postcssrc : Spécifiez le précompilateur CSS utilisé, qui est configuré ; avec préfixe automatique par défaut, complétez automatiquement le préfixe du navigateur
favicon.ico : la petite icône à côté du titre de l'onglet du navigateur, qui doit être collée par nous-mêmes
Structure du dossier src
Les paramètres du dossier dans le dossier src sont flexibles et peuvent être personnalisés selon les vôtres besoins Habituez-vous à cela et ne soyez pas obligé d’être le même. Voici la structure de ce projet :
actifs : placez des ressources statiques, y compris des fichiers CSS publics, des fichiers js, des fichiers de polices iconfont et img fichiers d’images et autres fichiers de ressources. La raison pour laquelle il est souligné qu'il s'agit d'un fichier CSS public est que la balise 'scoped' doit être ajoutée à la balise css du composant pour limiter sa portée à ce composant et au composant parent qui l'appelle pour éviter de contaminer le style global. ;http : placez les fichiers liés à l'API backend. Celui-ci contient le fichier de configuration d'instance de la bibliothèque axios et une collection de fonctions qui utilisent l'instance axios configurée pour accéder à l'API afin d'obtenir des données ;
mixins : un fichier qui place les options de mixage. Concrètement, il équivaut à un ensemble de fonctions publiques Lorsqu'il est référencé dans un composant, il peut agir sur le composant sans écrire de méthodes répétées
pages : composant où est placée la page principale ; . Par exemple, page de connexion, page d'informations utilisateur, etc. Habituellement, les composants ici écrivent eux-mêmes certaines structures, puis introduisent des composants de module communs pour former une page complète
routeur : placez le fichier de paramètres de routage et spécifiez les composants correspondant au routage ; 🎜>
Comment intégrer vux dans vue.js pour implémenter le chargement pull-up et l'actualisation déroulant
Comment utiliser Gulp pour implémenter des pages Web statiques Comment implémenter la modularisation ?
Utilisez js pour implémenter WeChat pour évoquer Alipay afin de recevoir des enveloppes rouges (tutoriel détaillé)
Comment utiliser jqprint pour imprimer le contenu de la page
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!