lwc recipes
1.0.0
Eine Sammlung leicht verständlicher Codebeispiele für Lightning-Webkomponenten. Jedes Rezept zeigt, wie man eine bestimmte Aufgabe mit möglichst wenigen Codezeilen codiert und dabei Best Practices befolgt. Über den Link „Quelle anzeigen“ gelangen Sie direkt zum Code auf GitHub. Von „Hello World“ über Datenzugriff bis hin zu Bibliotheken von Drittanbietern – dafür gibt es ein Rezept!
Erfahren Sie mehr über diese App, indem Sie das Trailhead-Projekt „Schnellstart: Entdecken Sie die Beispiel-App für LWC-Rezepte“ abschließen oder dieses kurze Präsentationsvideo ansehen.
Diese Beispielanwendung ist für die Ausführung auf der Salesforce-Plattform konzipiert. Wenn Sie Lightning Web Components auf einer beliebigen Plattform erleben möchten, besuchen Sie bitte https://lwc.dev und probieren Sie unsere Lightning Web Components-Beispielanwendung LWC Recipes OSS aus.
Installieren der App mithilfe einer Scratch-Organisation: Dies ist die empfohlene Installationsoption. Verwenden Sie diese Option, wenn Sie ein Entwickler sind, der die App und den Code erleben möchte.
Installieren der App mithilfe eines freigeschalteten Pakets: Mit dieser Option kann jeder die Beispiel-App testen, ohne eine lokale Entwicklungsumgebung installieren zu müssen.
Installieren der App über eine Developer Edition-Organisation oder einen Trailhead Playground: Nützlich, wenn Sie Trailhead Badges in Angriff nehmen oder wenn Sie die App in einer dauerhafteren Umgebung als einer Scratch-Organisation bereitstellen möchten.
Optionale Installationsanweisungen
Code-Touren
Richten Sie Ihre Umgebung ein. Befolgen Sie die Schritte im Trailhead-Projekt „Schnellstart: Lightning Web Components“. Die Schritte umfassen:
Aktivieren Sie Dev Hub in Ihrem Trailhead Playground
Installieren Sie die Salesforce-CLI
Installieren Sie Visual Studio Code
Installieren Sie die Visual Studio Code Salesforce-Erweiterungen, einschließlich der Lightning Web Components-Erweiterung
Wenn Sie dies noch nicht getan haben, autorisieren Sie Ihre Hub-Organisation und geben Sie ihr einen Alias ( myhuborg im folgenden Befehl):
sf org login web -d -a myhuborg
Klonen Sie das lwc-recipes-Repository:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
Erstellen Sie eine Testorganisation und geben Sie ihr einen Alias ( lwc-recipes im folgenden Befehl):
sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes
Übertragen Sie die App an Ihre Testorganisation:
sf project deploy start
Weisen Sie den Berechtigungssatz „Rezepte“ dem Standardbenutzer zu:
sf org assign permset -n recipes
Beispieldaten importieren:
sf data tree import -p ./data/data-plan.json
Öffnen Sie die Testorganisation:
sf org open
Aktivieren Sie im Setup unter „Themen und Branding“ das Theme „Recipes Lite“ oder „Recipes Blue“ .
Klicken Sie im App Launcher auf „Alle anzeigen“ und wählen Sie dann die LWC -App aus.
Befolgen Sie diese Anweisungen, wenn Sie die App in einer dauerhafteren Umgebung als einer Scratch-Organisation bereitstellen oder die lokalen Entwicklungstools nicht installieren möchten. Sie können Organisationen ohne Quellenverfolgung verwenden, z. B. eine kostenlose Developer Edition-Organisation oder einen Trailhead Playground.
Stellen Sie sicher, dass Sie in einer brandneuen Umgebung beginnen, um Konflikte mit früheren Arbeiten, die Sie möglicherweise durchgeführt haben, zu vermeiden.
Melden Sie sich bei Ihrer Organisation an
Klicken Sie auf diesen Link, um das freigeschaltete Rezeptpaket in Ihrer Organisation zu installieren.
Wählen Sie „Für alle Benutzer installieren“.
Konto- und Kontaktdaten importieren:
Klicken Sie hier, um auf die Datei Accounts-Contacts.csv zuzugreifen. Klicken Sie mit der rechten Maustaste auf das Browserfenster und speichern Sie die Datei als Accounts-Contacts.csv .
Geben Sie im Setup-Menü „Datenimport“ in das Feld „Schnellsuche“ ein und klicken Sie auf „Datenimport-Assistent“ .
Klicken Sie auf Assistent starten .
Klicken Sie auf Konten und Kontakte und dann auf Neue Datensätze hinzufügen .
Ziehen Sie die soeben gespeicherte Datei „Accounts-Contacts.csv“ in den Upload-Bereich.
Klicken Sie auf Weiter , Weiter und Import starten .
Wenn Sie den Schnellstart auf Trailhead durchführen, ist dieser Schritt erforderlich. Andernfalls können Sie Folgendes überspringen:
Gehen Sie zu Setup > Benutzer > Berechtigungssätze .
Klicken Sie auf Rezepte .
Klicken Sie auf Zuweisungen verwalten .
Überprüfen Sie Ihren Benutzer und klicken Sie auf Zuweisungen hinzufügen .
Aktivieren Sie im Setup unter „Themen und Branding“ das Theme „Recipes Lite“ oder „Recipes Blue“ .
Klicken Sie im App Launcher auf „Alle anzeigen“ und wählen Sie dann die LWC-Rezepte -App aus.
Befolgen Sie diese Anweisungen, wenn Sie die App in einer dauerhafteren Umgebung als einer Scratch-Organisation bereitstellen möchten. Dazu gehören Organisationen ohne Quellverfolgung, wie z. B. eine kostenlose Developer Edition-Organisation oder ein Trailhead Playground.
Stellen Sie sicher, dass Sie in einer brandneuen Umgebung beginnen, um Konflikte mit früheren Arbeiten, die Sie möglicherweise durchgeführt haben, zu vermeiden.
Klonen Sie dieses Repository:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
Autorisieren Sie Ihre Trailhead Playground- oder Entwicklerorganisation und geben Sie ihr einen Alias ( mydevorg im folgenden Befehl):
sf org login web -s -a mydevorg
Führen Sie diesen Befehl in einem Terminal aus, um die App bereitzustellen.
sf project deploy start -d force-app
Weisen Sie den Berechtigungssatz recipes “ dem Standardbenutzer zu.
sf org assign permset -n recipes
Importieren Sie einige Beispieldaten.
sf data tree import -p ./data/data-plan.json
Wenn Ihre Organisation noch nicht geöffnet ist, öffnen Sie sie jetzt:
sf org open -o mydevorg
Aktivieren Sie im Setup unter „Themen und Branding“ das Theme „Recipes Lite“ oder „Recipes Blue“ .
Wählen Sie im App Launcher die LWC -App aus.
Dieses Repository enthält mehrere Dateien, die relevant sind, wenn Sie moderne Webentwicklungstools in Ihre Salesforce-Entwicklungsprozesse oder in Ihre Continuous Integration/Continuous Deployment-Prozesse integrieren möchten.
Prettier ist ein Codeformatierer, der verwendet wird, um eine konsistente Formatierung in Ihrer gesamten Codebasis sicherzustellen. Um Prettier mit Visual Studio Code zu verwenden, installieren Sie diese Erweiterung vom Visual Studio Code Marketplace. Die Dateien .prettierignore und .prettierrc werden als Teil dieses Repositorys bereitgestellt, um das Verhalten des Prettier-Formatierers zu steuern.
Warnung: Die aktuelle Apex Prettier-Plugin-Version erfordert die Installation von Java 11 oder höher.
ESLint ist ein beliebtes JavaScript-Linting-Tool, das zur Identifizierung von Stilfehlern und fehlerhaften Konstrukten verwendet wird. Um ESLint mit Visual Studio Code zu verwenden, installieren Sie diese Erweiterung vom Visual Studio Code Marketplace. Die .eslintignore-Datei wird als Teil dieses Repositorys bereitgestellt, um bestimmte Dateien vom Linting-Prozess im Kontext der Lightning-Webkomponenten-Entwicklung auszuschließen.
Dieses Repository enthält außerdem eine package.json-Datei, die es einfach macht, einen Pre-Commit-Hook einzurichten, der Codeformatierung und Linting erzwingt, indem er Prettier und ESLint jedes Mal ausführt, wenn Sie git commit -Änderungen vornehmen.
So richten Sie den Formatierungs- und Linting-Pre-Commit-Hook ein:
Installieren Sie Node.js, falls Sie dies noch nicht getan haben
Führen Sie npm install im Stammordner Ihres Projekts aus, um die ESLint- und Prettier-Module zu installieren (Hinweis: Mac-Benutzer sollten überprüfen, ob die Xcode-Befehlszeilentools installiert sind, bevor sie diesen Befehl ausführen.)
Prettier und ESLint werden jetzt jedes Mal automatisch ausgeführt, wenn Sie Änderungen festschreiben. Der Commit schlägt fehl, wenn Linting-Fehler erkannt werden. Sie können die Formatierung und das Linting auch über die Befehlszeile mit den folgenden Befehlen ausführen (die vollständige Liste finden Sie in package.json):
npm run lint npm run prettier
Code-Touren sind geführte Komplettlösungen, die Ihnen helfen, den App-Code besser zu verstehen. Um sie ausführen zu können, installieren Sie die CodeTour VSCode-Erweiterung.
