Comment exécuter des projets dans vue.js

Comment exécuter le projet : 1. Installez node et cnpm ; 2. Installez vue-cli ; 3. Initialisez un projet ; 4. Utilisez la commande cd pour entrer dans le dossier du projet et utilisez "cnpm install" commande pour installer les dépendances ; 5. Utilisez la commande "npm run dev" pour exécuter le projet.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, version vue2.9, cette méthode convient à toutes les marques d'ordinateurs.

Recommandations associées : "Tutoriel vue.js"

Au début, de nombreuses personnes qui venaient de démarrer vue.js reprenaient les projets open source sur GitHub, mais ont découvert qu'ils ne savaient pas comment faire. Exécuter des projets open source sur GitHub est délicat. En consultant des didacticiels en ligne, j'ai réussi à créer l'environnement du projet et j'ai acquis une vague compréhension de l'ingénierie frontale, je partagerai donc le processus de création de l'environnement avec tout le monde.

Tout d'abord, listez ce dont nous avons besoin :

• environnement node.js (gestionnaire de paquets npm)

• vue -cli Scaffolding outil de construction

• cnpm npm Taobao Mirror

Installer node.js

Télécharger depuis le site officiel de node.js Et installer nœud, le processus d'installation est très simple, il suffit de "prochaine étape" jusqu'au bout (installation infaillible).
Une fois l'installation terminée, ouvrez l'outil de ligne de commande et entrez node -v, comme indiqué ci-dessous. Si le numéro de version correspondant apparaît, l'installation est réussie.

Le gestionnaire de packages npm est intégré au nœud, donc si vous entrez directement npm -v, npm s'affichera comme indiqué ci-dessous.

OK ! L'environnement de nœud a été installé et le gestionnaire de packages npm est également disponible. Étant donné que certaines ressources npm sont bloquées ou sont des ressources étrangères, cela échoue souvent lors de l'utilisation de npm pour installer des packages de dépendances. Par conséquent, j'ai également besoin du miroir national de npm --- cnpm.

Installer cnpm

Entrez

npm install -g cnpm --registry=http://registry.npm.taobao.org

dans la ligne de commande et attendez. L'installation se termine comme indiqué ci-dessous.

Une fois terminé, nous pouvons utiliser cnpm au lieu de npm pour installer les packages de dépendances. Si vous souhaitez en savoir plus sur cnpm, consultez le site officiel du miroir Taobao npm.

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

Exécutez la commande dans la ligne de commande,

cnpm install -g vue-cli

et attendez la fin de l'installation. (Notez que cnpm est utilisé ici au lieu de npm, sinon la vitesse sera très lente et provoquera un blocage)

Grâce aux trois étapes ci-dessus, l'environnement et les outils que nous devons préparer sont prêts, et nous pouvons ensuite commencez à utiliser vue -cli pour construire le projet.

Construisez le projet avec vue-cli

Pour créer le projet, nous devons d'abord sélectionner le répertoire, puis remplacer le répertoire par le répertoire sélectionné sur la ligne de commande. Ici, je choisis le bureau pour stocker le nouveau projet, puis nous devons d'abord placer le répertoire sur le bureau, comme indiqué ci-dessous.

Dans le répertoire du bureau, exécutez la commande dans la ligne de commande

vue init webpack firstVue

Expliquez cette commande, cette commande signifie initialisation d'un projet dans lequel webpack est l'outil de construction, c'est-à-dire que l'ensemble du projet est basé sur webpack. Parmi eux, firstVue est le nom de l'intégralité du dossier du projet. Ce dossier sera automatiquement généré dans le répertoire que vous spécifiez (dans mon exemple, le dossier sera généré sur le bureau), comme indiqué ci-dessous.

Lors de l'exécution de la commande d'initialisation, l'utilisateur sera invité à saisir plusieurs options de base, telles que le nom du projet, la description, l'auteur et d'autres informations. Si vous ne souhaitez pas le remplir directement, appuyez simplement sur Entrée et la valeur par défaut conviendra.

Ouvrez le dossier firstVue, le fichier projet est le suivant.

Il s'agit de la structure des répertoires de l'ensemble du projet, parmi laquelle nous apportons principalement des modifications dans le répertoire src. Ce projet n'est encore qu'un cadre structurel, et les ressources dépendantes nécessaires à l'ensemble du projet n'ont pas encore été installées, comme indiqué ci-dessous.

Installez les dépendances requises pour le projet

Pour installer les packages de dépendances, commencez par cd dans le dossier du projet (dossier firstVue), Exécutez ensuite la commande et

cnpm install

attend l'installation.

安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

安装完依赖包之后，就可以运行整个项目了。

运行项目

在项目目录中，运行命令，

 npm run dev

会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

如果看到这个页面，说明项目运行成功了。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个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!