recherche
Maisoninterface Webjs tutorielExplication détaillée de l'utilisation de l'échafaudage vue-cli pour initialiser la structure du projet sous le projet Vue

Cet article présente principalement l'explication détaillée de la structure du projet utilisant l'échafaudage vue-cli pour initialiser le projet Vue. Je vais maintenant le partager avec vous et vous donner une référence.

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 :

  1. vue-cli est une conception d'architecture de projet Vue mature qui sera mise à jour à mesure que la version de Vue change

  2. vue-cli fournit un ensemble de serveurs de test locaux à chargement à chaud

  3. 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

Créer un projet

Utilisez ensuite 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, et l'instance définie dans main.js sera montée dans Sous le nœud racine, le le contenu est rempli via les composants 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 les instances directement sur ou .

[main.js]

est le fichier d'entrée de l'application Vue, utilisé pour créer une nouvelle instance Vue et ceci L'instance est montée sous le nœud racine et peut également être utilisée pour introduire le plug-in Vue

option 'el' : Fournissez un élément DOM qui existe déjà sur la page comme une instance Vue La cible de montage, voici le nœud avec l'identifiant 'app' dans index.html

option 'router' : Injectez l'instance du routeur dans l'instance racine de Vue afin que chacun de ses sous-composants puisse y 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

'components' : composant racine

[App.vue]

Le composant racine du projet, qui peut contenir d'autres sous-composants pour former une arborescence de 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 le montre la figure, l'élément p avec l'identifiant de ' app' n'a pas de nœuds frères)

<script></script> est généralement écrit en es6. Utilisez export default pour exporter

par défaut, affectent le monde entier. Si vous devez définir la portée, simplement pour travailler sous ce composant, vous devez ajouter scoped à l'étiquette,

[router/index.js]

routage Le fichier de configuration est utilisé pour mapper les composants aux routes afin que vous sachiez où les restituer

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Résoudre le problème que la page ne s'affiche pas lorsque Vue modifie le tableau via le tableau suivant

vue2. 0 fusion inter-domaines axios Solution au problème de rendu

Solution au problème de superposition d'options de sélection dans layui

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!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Windows 无法初始化此硬件的设备驱动程序(代码 37)修复Windows 无法初始化此硬件的设备驱动程序(代码 37)修复Apr 14, 2023 pm 01:22 PM

当 Windows 检测到设备的驱动程序不兼容或损坏时,它无法对其进行初始化。设备停止工作,当用户调查时,“ Windows 无法为此硬件初始化设备驱动程序(代码 37) ”错误消息显示在“设备状态”窗格中。解决这个问题很容易,你可以很容易地做到这一点。修复 1 – 扫描计算机您可以扫描设备以查找任何硬件更改。Windows 最终将检查并检测任何驱动程序更改。1.您只需右键单击“ Windows键”并点击“设备管理器”。2. 当设备管理器出现在您的系统上时,单击菜单栏上的“操作”。3. 在这里,

修复: Windows 无法初始化此硬件的设备驱动程序修复: Windows 无法初始化此硬件的设备驱动程序Apr 13, 2023 pm 01:19 PM

错误代码 37 表示 Windows 检测到设备驱动程序存在问题,无法启动硬件设备。这意味着您的系统上未正确安装软件设备驱动程序,或者您尝试使用的硬件与 Windows 不兼容。您已经知道驱动程序对于设备的平稳运行至关重要,因此如果您要使用硬件设备,则需要立即解决此错误。在本文中,我们将向您展示绕过此错误的各种方法。是什么原因导致 Windows 错误代码 37?当您得到 Windows 无法初始化此硬件的设备驱动程序时。(代码 37) 消息,它可能由几个问题引起,包括:兼容性问题 – 当您将硬

动态链接库初始化例程失败什么办动态链接库初始化例程失败什么办Dec 29, 2023 am 10:30 AM

解决办法:1、重新安装应用程序;2、修复或重新安装DLL;3、系统还原或检查点恢复;4、使用系统文件检查器(SFC)扫描;5、检查启动项和服务;6、使用工具;7、查阅官方文档或论坛;8、考虑安全软件;9、查看事件查看器;10、寻求专家帮助等等。

win7怎么初始化电脑win7怎么初始化电脑Jan 07, 2024 am 11:53 AM

win7系统是一款非常优秀的高性能系统,在对win7的不断使用中有很多的朋友都在问win7怎么初始化电脑!今天小编为大家带来的就是win7电脑恢复出厂设置的操作方法。win7怎么初始化电脑的相关信息:图文详解操作步骤:1、打开“开始菜单”,然后进入。2、点击进入左侧底部的设置。3、在Win10更新和恢复设置的界面中,选择。4、点击“删除所有内容并重新安装Windows”下方的。5、可以看到如下“初始化”设置了,然后点击。6、进入“你的电脑有多个驱动器”设置选项,这里有和两个选项,可以根据情况选择

如何重置win7网络设置如何重置win7网络设置Dec 26, 2023 pm 06:51 PM

win7系统是一款非常优秀的高性能系统,最近一段时间里有很多win7系统的小伙伴们都在找win7怎么初始化网络设置的方法,今天小编为大家带来的就是win7电脑网络初始化的详细教程一起来看看吧。win7怎么初始化网络设置的详细教程:图文操作步骤:1、点“开始”菜单,找到并打开“控制面板”,进去之后再点“网络和共享中心”。2、然后找到并点开“更改适配器设备”。3、接下来,在打开的窗口中,鼠标右键点击“本地连接”,再点“属性”。4、打开之后,就找到“Internet协议版本(TCP/IPv4)”,再双

修复无法初始化PC上的图形系统错误修复无法初始化PC上的图形系统错误Mar 08, 2024 am 09:55 AM

许多游戏玩家遇到了游戏无法初始化图形系统的令人沮丧的问题。这篇文章将深入探讨这个问题背后的常见原因,并找到简单而有效的解决方案,让你重新回到棋盘上,并在任何时间内通过关卡。因此,如果你在过山车大亨、刺客信条、托尼·霍克的职业溜冰者等中收到无法初始化图形系统错误信息,请遵循本文中提到的解决方案。初始化错误无法初始化图形系统。不支持显卡。修复无法初始化图形系统错误信息要解决过山车大亨、刺客信条、托尼·霍克的专业溜冰者等游戏中的无法初始化图形系统错误,可以尝试执行以下解决方法:更新显卡驱动程序在兼容模

C++程序初始化字典C++程序初始化字典Sep 09, 2023 pm 07:01 PM

C++在同名的字典方面与Python不同,但它具有相似功能的相同数据结构。C++支持映射,可在STL类std::map中使用。映射对象在每个条目中包含一对值,一个是键值,另一个是映射值。键值用于在映射中搜索和唯一标识条目。而映射值不一定是唯一的,键值在映射中必须始终是唯一的。让我们看一下如何使用映射。首先,让我们看看如何在C++中定义一个映射数据结构。语法#includemap<data_type1,data_type2>myMap;让我们举个例子,看看如何做到这一点−示例#incl

修复:新 SSD 未在 Windows 11、10 中显示修复:新 SSD 未在 Windows 11、10 中显示Apr 14, 2023 pm 02:52 PM

SSD 彻底改变了技术世界。这些数据存储解决方案凭借其超快和无与伦比的读/写速度,让每个用户都渴望在其中安装系统操作系统。但是,如果您的新 SSD 没有出现在您的 Windows 设备上怎么办?这是插入系统的全新 SSD 可能面临的一个典型问题。不用担心。我们刚刚得到了正确的解决方案,您所要做的就是按照这些步骤操作,SSD 将立即回到您的文件资源管理器。解决方法——1. 检查SSD的连接。如果您使用的是 USB 集线器,请将 SSD 直接连接到您的系统。查看 SSD 的连接器是否有任何物理缺陷。

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Version crackée d'EditPlus en chinois

Version crackée d'EditPlus en chinois

Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),