Grafische Analyse der Verwendung von Vue-Cli-Gerüsten

Mit Vue-Cli können Sie Vue-Cli-Projekte schnell erstellen, aber beim ersten Einrichten der Umgebung für die Installation von Vue-Cli und zugehörigen Inhalten ist es für einige Leute ein Problem Es gibt viele Fallstricke beim Aufbau der Vue-Cli-Projektumgebung. In diesem Artikel wird hauptsächlich die Verwendung des Vue-Cli-Gerüsts Schritt für Schritt vorgestellt. Der Herausgeber findet es ziemlich gut und geben Sie es allen als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vorteile des Vue-Cli-Gerüsts:

1. Es verfügt über ein ausgereiftes Vue-Projektarchitekturdesign, mit dem ein Vue-Projekt schnell initialisiert werden kann.

2. vue-cli ist ein offiziell unterstütztes Gerüst und wird mit dieser Version iterativ aktualisiert.

3. vue-cli stellt eine Reihe lokaler Knotentestserver bereit. Sie können den Server mit den von vue-cli selbst bereitgestellten Befehlen starten.

4. Integrierte Verpackungs- und Online-Lösung.

5. Es gibt auch einige Vorteile, darunter: Modularisierung, Übersetzung, Vorverarbeitung, Hot Loading, statische Erkennung und automatisierte Tests usw. Sie werden die Leistungsfähigkeit von vue-cli entdecken, wenn Sie es verwenden im Detail.

Dieses Tutorial basiert auf dem Windows-System.

Jetzt beginnen wir offiziell mit dem Bau des vue-cli-Gerüsts.

Befehlszeilentools

Befehlszeilentools sind für uns die Grundlage für die Bedienung von npm Erklären Sie diese klar. Zu Beginn des Tutorials wurden viele Befehle gepostet, und ich wusste zunächst nicht, wo ich die Befehlszeilentools verwenden sollte. . .

Git-Bash-Befehlszeilentool

1. Unter Windows empfehle ich die Verwendung des Git-Bash-Befehlszeilentools, das mit dem Desktop-Verwaltungstool von GitHub geliefert wird Installieren Sie es normal.

2. Download-Adresse zeigt, wie Git Bash verwendet wird, nachdem der Download und die Installation abgeschlossen sind.

So verwenden Sie das Git-Bash-Befehlszeilentool

ps: Natürlich, wenn Sie den integrierten Terminal-Befehl cmd verwenden möchten line-Tool können Sie, aber schließlich ist es nicht so einfach zu verwenden wie Git Bash.

Node.js installieren

1. Laden Sie node.js einfach wie gewohnt von der offiziellen chinesischen Website von node.js herunter und installieren Sie es nichts Besonderes erforderlich Zu beachtende Punkte (kinderleichte Installation).

2. Nach dem Herunterladen und Installieren von node.js von der offiziellen Website ist npm (Paketverwaltungstool) bereits im Lieferumfang enthalten, und es ist nicht erforderlich, npm separat zu installieren.

3. Bitte beachten Sie, dass die heruntergeladene node.js-Version über 4.0 sein muss, um eine Verwendung zu vermeiden, wenn die Version zu niedrig ist.

4. Öffnen Sie das Befehlszeilentool (beliebiger Ordner) und geben Sie den Befehlszeilenknoten -v, npm -v ein, wie unten gezeigt. Wenn die entsprechende Versionsnummer angezeigt wird, ist die Installation erfolgreich.

Knoten-NPM-Installation erkennen

Taobao-Spiegel installieren

cnpm (Taobao-Spiegel) bezogen auf:

1. Dies ist ein vollständiger npmjs.org-Spiegel, der zum Synchronisieren des npm-Moduls verwendet wird .

2. Die Synchronisierungsfrequenz von cnpm beträgt 10 Minuten (neu veröffentlichte Module weisen Verzögerungen auf, die Synchronisierung dauert einige Zeit. Sie können npm verwenden, wenn Sie nicht warten können).

3. Der Grund für die Installation von cnpm: Der Server von npm ist fremd, daher ist er manchmal sehr, sehr, sehr, sehr, sehr langsam, wenn wir „Module“ installieren.

4. Die Rolle von cnpm: Der Taobao-Spiegel synchronisiert die Module auf npm mit dem heimischen Server und verkürzt so die Zeit, die wir für die Installation von Modulen benötigen.

5. Nach der Installation des Taobao-Images können sowohl cnpm- als auch npm-Befehlszeilen verwendet werden. Es besteht kein Konflikt zwischen den beiden

Screenshots von der offiziellen Website von Taobao Mirror

Installationsmethode: Öffnen Sie das Befehlszeilentool und geben Sie die Befehlszeile ein:

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

So verwenden Sie cnpm:

$ cnpm install [name]

Ersetzen Sie bei der Installation des Moduls einfach npm durch cnpm. Ich persönlich empfehle das Jeder installiert es. Angehängt: Taobao-Spiegel-URL,

Webpack installieren

Installationsmethode: Öffnen Sie das Befehlszeilentool und geben Sie die Befehlszeile ein:

npm install webpack -g

Geben Sie nach erfolgreicher Installation webpack -v ein. Wenn die entsprechende Versionsnummer angezeigt wird, ist die Installation erfolgreich.

Vue-cli-Gerüstkonstruktionstool installieren

Installationsmethode: Globale Installation, in einem beliebigen Ordner die Befehlszeile eingeben:

npm install vue-cli -g

Geben Sie nach Abschluss der Installation die Befehlszeile vue -V ein, um die Versionsnummer zu überprüfen. Wenn die entsprechende Versionsnummer angezeigt wird, ist die Installation erfolgreich:

查看vue-cli是否安装成功

注：这里是大写的V

通过vue-cli，初始化vue项目

通过以上几步，将我们安装脚手架所需要的环境和工具都准备好好了，下面就可以使用vue-cli来初始化项目。

1。新建一个vuetext（项目名）文件夹来放置项目，在新建文件夹的上一级文件夹右键打开命令行工具，输入命令行：

vue init webpack vuetext1(项目名)

注：项目名不能大写，不能使用中文解释一下这个命令，这个命令的意思是初始化一个vue项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中vuetext1是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。

2。以下是脚手架安装过程（安装步骤解析在图片下面）

vue-cli初始化项目选项配置详细解析

$ vue init webpack vuetext1--------------------- 安装vue-cli,初始化vue项目的命令
? Target directory exists. Continue? (Y/n) y---------------------找到了vuetext1这个目录是否要继续
? Target directory exists. Continue? Yes
? Project name (vuetext1)---------------------项目的名称（默认是文件夹的名称），ps：项目的名称不能有大写，不能有中文，否则会报错
? Project name vuetext1
? Project description (A Vue.js project)---------------------项目描述，可以自己写
? Project description A Vue.js project
? Author (OBKoro1)---------------------项目创建者
? Author OBKoro1 
? Vue build (Use arrow keys)--------------------选择打包方式，有两种方式（runtime和standalone），使用默认即可
? Vue build standalone
? Install vue-router? (Y/n) y--------------------是否安装路由，一般都要安装
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则，这里个人建议选no，因为经常会各种代码报错，新手还是不安装好
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安装单元测试
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试 
? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "vuetext1".
To get started:)--------------------如何开始
 cd vuetext1)--------------------进入你安装的项目
 npm install)--------------------安装项目依赖
 npm run dev)--------------------运行项目
Documentation can be found at https://vuejs-templates.github.io/webpack)--------------------vue-cli官方文档

现在vuetext1项目已经初步初始化完成了，里面也有一些文件，但是现在还不能成功运行。

3.如何运行项目

进入你刚才创建在vuetext1项目的文件夹里面，在vuetext1项目的文件夹里面右键运行git bash 命令行工具。

安装项目依赖。命令行： npm  install。前面在项目初始化的时候，已经存在了package.json文件，直接使用npm install 安装项目所需要的依赖，否则项目不能正确运行。

创建完成的“vuetext1”目录如下：

创建完成的项目结构

到这里，我们已经成功使用vue-cli初始化了一个vue项目。

启动项目：

在vuetext1目录运行命令行npm run dev，启动服务，服务启动成功后浏览器会默认打开一个“欢迎页面”，如下图。

vue-cli项目成功启动

注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用，当有其他vue项目运行的时候，可以使用ctrl+c来中断运行。

结语：

本文关于如何搭建vue-cli脚手架已经尽量详细了，仔细阅读，按步骤来基本上可以成功。如果有哪个地方写的不够清楚的，欢迎指正。本文面向小白，写着玩，大手请轻喷。

相关推荐：

如何使用 vue-cli 开发多页应用方法

怎么使用vue-cli来搭建vue项目和webpack？

总结关于Vue-cli的相关实例

Das obige ist der detaillierte Inhalt vonGrafische Analyse der Verwendung von Vue-Cli-Gerüsten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!