Maison interface Web Voir.js Comment installer des dépendances dans vuejs

Comment installer des dépendances dans vuejs

Sep 26, 2021 pm 05:32 PM
vue

Comment installer les dépendances de vuejs : 1. Installez node et cnpm ; 2. Installez l'outil de construction d'échafaudage vue-cli ; 3. Construisez le projet avec vue-cli 4. Ouvrez la fenêtre de commande cmd et utilisez la commande cd ; entrez le dossier spécifique du projet Medium; 5. Exécutez la commande "cnpm install" pour installer les dépendances.

Comment installer des dépendances dans vuejs

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

1. Environnement de développement

vue environnement de développement recommandé :

Node.js : javascript runtime (runtime), différents systèmes exécutent directement divers langages de programmation

npm : gestionnaire de packages sous Nodejs.

webpack : Son objectif principal est de préparer toutes les ressources statiques qui doivent être publiées par le navigateur via la syntaxe CommonJS, telles que la fusion et l'empaquetage des ressources.

vue-cli : Modèle de projet Vue généré par l'utilisateur

2. Configuration de l'environnement

Installer node.js :
1. Téléchargez et installez node depuis le site officiel de node.js Le processus d'installation est très simple. .
2. La version npm doit être supérieure à 3.0. Si elle est inférieure à cette version, vous devez la mettre à niveau :

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g
Copier après la connexion

3. Basé sur node.js, utilisez le miroir Taobao npm pour installer les dépendances associées. Étant donné que l'utilisation de npm en Chine sera très lente, il est recommandé d'utiliser le miroir Taobao NPM (http://npm.taobao.org/)

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Copier après la connexion

Une fois terminé, nous pouvons utiliser cnpm au lieu de npm pour installer les packages dépendants.

Trois. Installez l'outil de construction d'échafaudage vue-cli

Installez l'échafaudage global vue-cli pour aider à créer le cadre de modèle requis

$ cnpm install -g vue-cli
# 回车,等待安装...
$ vue
# 回车,若出现vue信息说明表示成功
Copier après la connexion

Construisez le projet avec vue-cli

# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack
Copier après la connexion

Cinq. Installez les dépendances

dans cmd

1). Entrez : cd my-project (nom du projet), appuyez sur Entrée, entrez le dossier spécifique du projetcd my-project(项目名),回车,进入到具体项目文件夹

2).输入:cnpm install,回车,等待一小会儿

回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)

六、测试环境是否搭建成功

方法1:在cmd里输入:npm run dev

2). Entrez : cnpm install. , appuyez sur Entrée, attendez un peu

Retournez dans le dossier du projet, vous constaterez qu'il y a un dossier node_modules supplémentaire dans la structure du projet (le contenu de ce fichier est constitué des dépendances précédemment installées)

6. Si l'environnement de test est configuré avec succès

🎜🎜Méthode 1 : Entrez dans cmd : npm run dev🎜🎜Méthode 2 : Entrez dans le navigateur : localhost:8080 (le port par défaut est 8080 )🎜🎜Connexe recommandé : "🎜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!

Déclaration de ce site Web
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

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 semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Vue3 Syntaxe non définie Sugar: comment lier dynamiquement les accessoires à l'aide de balises V dans les balises de style? Vue3 Syntaxe non définie Sugar: comment lier dynamiquement les accessoires à l'aide de balises V dans les balises de style? Apr 05, 2025 pm 06:12 PM

Utilisation de CSS dans le sucre de syntaxe Vue3 non définie ...

Comment compatible avec l'omission de débordement multi-lignes sur le terminal mobile? Comment compatible avec l'omission de débordement multi-lignes sur le terminal mobile? Apr 05, 2025 pm 10:36 PM

Problèmes de compatibilité du débordement multi-rangs sur le terminal mobile omis sur différents appareils Lors du développement d'applications mobiles à l'aide de Vue 2.0, vous rencontrez souvent la nécessité de déborder de texte ...

Comment introduire correctement le fichier index.css de l'interface utilisateur des éléments et éviter les échecs de chargement de style? Comment introduire correctement le fichier index.css de l'interface utilisateur des éléments et éviter les échecs de chargement de style? Apr 05, 2025 pm 02:33 PM

Les meilleures pratiques concernant l'introduction des fichiers de style Electui que de nombreux développeurs utilisent élément ...

La production de pages H5 est-elle un développement frontal? La production de pages H5 est-elle un développement frontal? Apr 05, 2025 pm 11:42 PM

Oui, la production de pages H5 est une méthode de mise en œuvre importante pour le développement frontal, impliquant des technologies de base telles que HTML, CSS et JavaScript. Les développeurs construisent des pages H5 dynamiques et puissantes en combinant intelligemment ces technologies, telles que l'utilisation du & lt; Canvas & gt; Tag pour dessiner des graphiques ou utiliser JavaScript pour contrôler le comportement d'interaction.

Le seuil pour la production de pages H5 est-il élevé? Le seuil pour la production de pages H5 est-il élevé? Apr 05, 2025 pm 11:45 PM

Le seuil de fabrication de pages H5 n'est ni élevé ni bas, selon l'objectif. Il est plus facile de créer des pages statiques simples, il vous suffit de maîtriser les connaissances de base de HTML et CSS; Il est relativement élevé de créer des pages avec de fortes fonctionnalités interactives et riches, et vous devez avoir une connaissance approfondie de HTML, CSS, JavaScript, des cadres frontaux, l'optimisation des performances et la compatibilité.

Comment le composant du calendrier de conception de fourmis modifie-t-il uniquement le composant actuel pour faire apparaître le dimanche dans la première colonne? Comment le composant du calendrier de conception de fourmis modifie-t-il uniquement le composant actuel pour faire apparaître le dimanche dans la première colonne? Apr 05, 2025 pm 08:12 PM

Antdesign Calendar Component First Column montre la solution de dimanche dans Calendar en utilisant AntDesign ...

Dans le sucre de syntaxe Vue3 non définie, comment utiliser les accessoires composants gracieusement dans CSS V-Bind? Dans le sucre de syntaxe Vue3 non définie, comment utiliser les accessoires composants gracieusement dans CSS V-Bind? Apr 05, 2025 pm 11:06 PM

Comment gracieusement dans CSS dans le sucre de syntaxe Vue3 non définie ...

Quels outils sont bons pour fabriquer des pages H5 Quels outils sont bons pour fabriquer des pages H5 Apr 06, 2025 am 06:33 AM

Les outils de fabrication de pages H5 appropriés sont déterminés en fonction du niveau de compétence: les débutants utilisent les éditeurs visuels (tels que les plates-formes en ligne ou les outils de création de sites Web), les éditeurs de code d'utilisation avancés (tels que le texte sublime) ainsi que des outils auxiliaires (tels que des cadres, des outils de gestion de package, des outils de débogage) et des outils de niveau master peuvent être développés par eux-mêmes. N'oubliez pas que le choix des outils est auxiliaire, le noyau est la capacité personnelle et l'apprentissage continu.

See all articles