Cette fois, je vais vous montrer comment utiliser l'initialisation de l'échafaudage vue-cli, quelles sont les précautions lors de l'utilisation de l'échafaudage vue-cli, ce qui suit est un cas pratique, jetons un coup d'œil.
vue-cli est un outil de ligne de commande officiel fourni par Vue, qui peut être utilisé pour créer rapidement des applications d'une seule page à grande échelle. L'outil fournit une configuration d'outil de construction prête à l'emploi, apportant un processus de développement frontal moderne. Cela ne prend que quelques minutes pour créer et lancer un projet avec un rechargement à chaud, des vérifications statiques lors de la sauvegarde et une configuration de build prête pour la production.
L'utilisation de vue-cli présente les avantages majeurs suivants :
vue-cli est une conception d'architecture de projet Vue mature qui sera mise à jour à mesure que la version de Vue change
vue-cli fournit un ensemble de serveurs de test locaux à chargement à chaud
vue-cli intègre une solution en ligne packagée, qui peut utiliser des outils de construction tels que webpack ou Browserify
Installer
Pour installer vue-cli
# 必须全局安装vue-cli，否则无法使用vue命令 # 安装完成之后使用vue -V检查vue-cli是否安装成功及版本信息 $ npm install -g vue-cli $ vue -V
Ensuite, utilisez vue-cli pour créer un nouveau projet Vue
# 项目创建完之后需要执行npm install安装依赖 $ vue init webpack vuedemo $ npm install
Le dossier vuedemo créé contient les fichiers suivants :
[index.html]
index.html est le même que les autres fichiers HTML, mais généralement seul un nœud racine vide est défini, qui est défini dans main.js L'instance sera sera monté sous le nœud racine et le contenu sera rempli via les composants de vue Étant donné que tous les éléments de montage seront remplacés par le DOM généré par Vue, il n'est pas recommandé de monter directement l'instance sur <html> ou <body>.
[main.js]
est le fichier d'entrée de l'application Vue, utilisé pour créer une nouvelle instance de Vue, et monter cette instance sous le nœud racine, et peut également être utilisé pour introduire le plug-in Vue
option 'el' : en fournir une existante sur la page L'élément DOM est utilisé comme cible de montage de l'instance Vue. Voici le nœud avec l'identifiant 'app' dans index.html
option 'router' : Injectez l'instance de routeur dans la racine de Vue. instance afin que chacun de ses composants enfants puisse accéder à $router (instance de routeur) et $route (objet d'informations de routage actuellement activé)
option 'template' : utiliser un modèle de chaîne comme identifiant de l'instance Vue
'composants' : Composant racine
[App.vue]
Le composant racine du projet, qui peut contenir d'autres sous-composants pour former un l'arborescence des composants
ne peut contenir qu'un seul nœud enfant, ce qui signifie qu'il ne peut y avoir qu'un seul p de niveau supérieur (comme indiqué dans le figure, l'élément p avec l'identifiant 'app' n'a pas de nœuds frères)
<script></script> est généralement écrit en es6 et exporté en utilisant les styles d'exportation par défaut
.affecte le monde entier par défaut. Si vous souhaitez définir une portée qui ne fonctionne que sous ce composant, vous devez ajouter scoped à l'étiquette,
