Erstellen Sie ein Uni-App-Projekt mithilfe von Gerüsten

"

Ich habe nichts zu tun, um ein kleines Programm zu schreiben, daher möchte ich das Uni-App-Framework verwenden, um es zu implementieren. In diesem Artikel werden die Erstellungsschritte im Detail erläutert.

"

Vorwort

Dieser Artikel stellt hauptsächlich die Erstellung des kleinen Programm-Frameworks uni-app vor. Wenn Sie auch ein Anfänger sind, können Sie dem Rhythmus von Kaka folgen.

1. Installieren Sie node.js

Öffnen Sie die offizielle Website, um die eingekreiste Version zu installieren.

node.js-Installation

Nachdem die Installation abgeschlossen ist, verwenden Sie node -V, um zu überprüfen, ob die Installation erfolgreich ist

Überprüfen Sie, ob node.js erfolgreich installiert wurde

Warum sollte ich node installieren .js? Ich denke, es gibt viele Fragen. Es ist, als würde man das Backend schreiben, was ich nicht verstehen kann.

Da die node.js-Software über integriertes npm verfügt, können Sie nach der Installation von nodejs auf dem Windows-System npm zum Herunterladen von Ressourcen verwenden, indem Sie cmd öffnen. Ich werde hier vorerst nicht über Linux sprechen!

npm, der vollständige Name lautet [Node Package Management], ist der integrierte Paketmanager von NodeJS, weshalb node.js installiert ist.

Zweitens: Verwenden Sie npm, um das Vue-Gerüst zu installieren

Ich habe online nachgeschaut und die meisten ersten Schritte bestehen darin, den Befehl auszuführennpm install -g @vue/clinpm install -g @vue/cli

但是安装的vue-cli是2.9版本的，但是在创建uni-app项目时需要使用create命令，所以需要更高的版本。

这里也是咔咔踩过的一个坑，你们就不踩了哈！

如果已经安装的可以使用npm uninstall -g vue-cli这个命令进行卸载。

“

然后执行npm install -g cnpm这个命令。

”

看网上有人使用的淘宝的npm install -g cnpm --registry=http://registry.npm.taobao.org 安装淘宝的cnpm

Aber das installierte vue-cli ist Version 2.9, muss aber beim Erstellen verwendet werden Der Befehl „uni-app project create“, daher ist eine höhere Version erforderlich.

Dies ist auch eine Grube, auf die Kaka getreten ist, also treten Sie nicht darauf!

Wenn Sie es bereits installiert haben, können Sie Dieser Befehl deinstalliert. <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 16px; overflow: hidden;"><blockquote class="multiquote-1" data-tool="mdnice editor" style="border: none; font-size: 0.9em; overflow: auto; margin-bottom: 20px; margin-top: 20px; padding : 15px 10px; line-height: 13px; background-image: initial; background-repeat: initial; Hintergrundanhang: Initiale; Hintergrundclip: Initiale; Arial, Serif; Zeilenhöhe: 1em; Schriftstärke: 700;">"<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/182/773/189/1606560264234178.png" class="lazy" title="1606560264234178.png" alt="Erstellen Sie ein Uni-App-Projekt mithilfe von Gerüsten"><p style="max-width:90%"><span style="font-weight: 700; color: rgb(248, 57, 41);">Dann ausführen<code style="font-size: 14px; ; Polsterung: 2px 4px; Randfarbe: rgba(27,31,35,.05); break: break-all; color: rgb(271, 93, 108);">npm install -g cnpmDieser Befehl.

"

Schauen Sie sich den Taobao-Code an, den manche Leute online verwendennpm install -g cnpm --registry=http://registry.npm.taobao.org Installiere Taobaos cnpm.

🎜Kaka versteht es als Spiegel, aber Kaka hat ein Artefakt , also Verwenden Sie einfach die Installation direkt, ohne Taobao zu verwenden. 🎜🎜Die erfolgreiche Installation ist im Bild unten dargestellt. 🎜🎜🎜🎜cnpm-Installationserfolgsdemonstration. Installieren Sie dann das Vue-Gerüst erneut und führen Sie den Befehl aus

“

”

再次安装@vue-cli

下图为安装过程，流程没有截完。

安装过程

安装完成后再使用vue -V查看一下版本就是4.5.9的了，只要大过3就可以了。

新的版本

三、创建项目

经过上面无伤大雅的安装之后，那么我们接下来就是在面向窗口cmd中输入：

“

vue create -p dcloudio/uni-preset-vue 项目名称

”

Installieren Sie @vue-cli erneut

Das Bild unten zeigt den Installationsvorgang, der Vorgang ist jedoch noch nicht abgeschlossen. 🎜

Installationsprozess figcaption >

🎜Verwenden Sie nach Abschluss der Installation vue -V, um die Version zu überprüfen. Es ist 4.5.9, sofern es größer als 3 ist. 🎜

Neue Version

🎜3. Erstellen Sie das Projekt🎜🎜

🎜Nach der harmlosen Installation oben besteht der nächste Schritt darin, im fensterorientierten cmd Folgendes einzugeben: 🎜🎜🎜"🎜🎜vue create -p dcloudio/uni-preset-vue Projektname;🎜🎜"🎜🎜🎜Projekt erstellen🎜

Wenn Sie es zum ersten Mal erstellen, werden Sie aufgefordert, die Standardeinstellung auszuwählen und zur Auswahl die Eingabetaste zu drücken.

Projekt erstellen

Ich weiß nicht, ob beim Erstellen des Projekts folgende Probleme auftreten werden, aber hier liegt ein Problem vor. Kaka wird das Auftreten und die Lösung dieses Problems aufschreiben.

Wenn Sie darauf stoßen, folgen Sie einfach hier. Wenn Sie nicht darauf stoßen, überspringen Sie es einfach.

Das Bild unten zeigt den Fehler, der während des Installationsvorgangs aufgetreten ist.

Fehlerdemonstration

Lösung

Verwenden Sie den Administratormodus, um die Befehlszeile zu öffnen

"

Befehl ausführennpm cache clean -fLöschen. Cache

"

Ru n der Kommandozeile als Administrator

Nachdem Sie den Cache geleert haben, installieren Sie die neueste Version des Node-Helfers:

“

npm install -g n

”

然后执行以下命令

“

npm install -g n --force

”

最后执行

“

npm install

“

然后执行以下命令

“

🎜npm install -g n --force🎜🎜🎜最后执行🎜🎜🎜“🎜🎜npm install🎜🎜”🎜🎜🎜即可。🎜🎜然后重新执行创建项目`🎜

“

”

看到下图咔咔圈到的就代表已经创建成功了。

创建项目

四、微信开发者工具中运行项目

项目创建成功后就需要运行了

来到项目目录执行命令

“

npm run dev:mp-weixin

”

看到下图提示即可。

运行项目

运行完毕之后你会在项目目录中看到以下结构，会多出一个dist

四、微信开发者工具中运行项目🎜🎜

npm run dev:mp-weixin

🎜"🎜

看到下图提示即可。🎜

dist目录🎜

Projektverzeichnis

Der Projektpfad, der in das WeChat Developer Tool importiert werden muss, ist die im Bild unten eingekreiste Stelle.

Das WeChat Developer Tool importiert das Projektverzeichnis.

Lernen Sie selbst, wie das geht Importieren Sie Projekte in die WeChat-Entwicklungsplattform. Das Bild unten ist eine Darstellung von Kakas Vorgang Erstellen Sie ein Uni-App-Projekt.

Dies ist mein erster Kontakt mit vue und mein erster Kontakt mit uni-app, um kleine Programme zu entwickeln. Wenn also bei der Ausführung einiger Befehle und der Lösung von Problemen im Artikel etwas nicht stimmt, wenden Sie sich bitte an uns. Ich hoffe, Sie können darauf hinweisen.

In diesem Erstellungsprozess hat Kaka auch andere technische Artikel Schritt für Schritt verfolgt. Der am Ende zusammengefasste Artikel soll auch Anfängern wie mir eine Hilfestellung geben.

„Beharrlichkeit beim Lernen, Beharrlichkeit beim Bloggen und Beharrlichkeit beim Teilen sind die Überzeugungen, die Kaka seit seiner Karriere vertritt. Ich hoffe, dass Kakas Artikel im riesigen Internet Ihnen ein wenig helfen können Kaka, wir sehen uns in der nächsten Ausgabe.“

Das obige ist der detaillierte Inhalt vonErstellen Sie ein Uni-App-Projekt mithilfe von Gerüsten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!