lwc recipes
1.0.0
Коллекция простых для понимания примеров кода для веб-компонентов Lightning. Каждый рецепт демонстрирует, как запрограммировать конкретную задачу с помощью наименьшего количества строк кода, следуя лучшим практикам. Ссылка «Просмотреть исходный код» приведет вас прямо к коду на GitHub. От «Hello World» до доступа к данным и сторонних библиотек — для этого есть рецепт!
Узнайте больше об этом приложении, выполнив руководство «Краткое руководство: ознакомьтесь с проектом примера приложения LWC Recipes Sample» или посмотрев это короткое презентационное видео.
Этот пример приложения предназначен для работы на платформе Salesforce. Если вы хотите использовать веб-компоненты Lightning на любой платформе, посетите https://lwc.dev и попробуйте наш пример приложения веб-компонентов Lightning LWC Recipes OSS.
Установка приложения с помощью Scratch Org: это рекомендуемый вариант установки. Используйте этот вариант, если вы разработчик, желающий испытать приложение и код.
Установка приложения с использованием разблокированного пакета. Этот вариант позволяет любому пользователю протестировать пример приложения без установки локальной среды разработки.
Установка приложения с использованием организации Developer Edition или Trailhead Playground: полезно при работе с Trailhead Badges или если вы хотите, чтобы приложение было развернуто в более постоянной среде, чем организация Scratch.
Дополнительные инструкции по установке
Кодовые туры
Настройте свою среду. Выполните действия, описанные в проекте «Краткий старт: начало проекта веб-компонентов Lightning». Эти шаги включают в себя:
Включите Dev Hub на своей игровой площадке Trailhead
Установите интерфейс командной строки Salesforce
Установить код Visual Studio
Установите расширения Visual Studio Code Salesforce, включая расширение Lightning Web Components.
Если вы еще этого не сделали, авторизуйте свою центральную организацию и предоставьте ей псевдоним ( myhuborg в команде ниже):
sf org login web -d -a myhuborg
Клонируйте репозиторий lwc-recipes:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
Создайте временную организацию и дайте ей псевдоним ( lwc-recipes в команде ниже):
sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes
Отправьте приложение в свою рабочую организацию:
sf project deploy start
Назначьте набор разрешений рецептов пользователю по умолчанию:
sf org assign permset -n recipes
Импортируйте образцы данных:
sf data tree import -p ./data/data-plan.json
Откройте рабочую организацию:
sf org open
В разделе «Настройка» в разделе «Темы и брендинг» активируйте тему Recipes Lite или Recipes Blue .
В панели запуска приложений нажмите «Просмотреть все» , затем выберите приложение LWC .
Следуйте этому набору инструкций, если вы хотите развернуть приложение в более постоянной среде, чем организация Scratch, или если вы не хотите устанавливать локальные инструменты разработки. Вы можете использовать организации, не отслеживаемые по исходному коду, например бесплатную организацию Developer Edition или Trailhead Playground.
Обязательно начните с совершенно новой среды, чтобы избежать конфликтов с предыдущей работой, которую вы, возможно, проделали.
Войдите в свою организацию
Щелкните эту ссылку, чтобы установить разблокированный пакет рецептов в вашей организации.
Выберите «Установить для всех пользователей».
Импортировать данные учетной записи и контактов:
Нажмите здесь, чтобы получить доступ к файлу Accounts-Contacts.csv . Щелкните правой кнопкой мыши окно браузера и сохраните файл как Accounts-Contacts.csv .
В программе «Настройка» введите «Импорт данных» в поле «Быстрый поиск» и нажмите «Мастер импорта данных» .
Нажмите «Мастер запуска» .
Нажмите «Учетные записи и контакты» и нажмите «Добавить новые записи» .
Перетащите файл Accounts-Contacts.csv , который вы только что сохранили, в область загрузки.
Нажмите «Далее» , «Далее » и «Начать импорт» .
Если вы пытаетесь выполнить быстрый старт на Trailhead, этот шаг обязателен, в противном случае пропустите:
Откройте «Настройка» > «Пользователи» > «Наборы разрешений» .
Нажмите рецепты .
Нажмите «Управление назначениями» .
Проверьте своего пользователя и нажмите «Добавить назначения» .
В разделе «Настройка» в разделе «Темы и брендинг» активируйте тему Recipes Lite или Recipes Blue .
В панели запуска приложений нажмите «Просмотреть все» , затем выберите приложение «Рецепты LWC» .
Следуйте этому набору инструкций, если вы хотите развернуть приложение в более постоянной среде, чем организация Scratch. Сюда входят организации, не отслеживаемые в исходном коде, такие как бесплатная организация Developer Edition или Trailhead Playground.
Обязательно начните с совершенно новой среды, чтобы избежать конфликтов с предыдущей работой, которую вы, возможно, проделали.
Клонируйте этот репозиторий:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
Авторизуйте свою Trailhead Playground или организацию разработчиков и предоставьте ей псевдоним ( mydevorg в команде ниже):
sf org login web -s -a mydevorg
Запустите эту команду в терминале, чтобы развернуть приложение.
sf project deploy start -d force-app
Назначьте набор разрешений recipes пользователю по умолчанию.
sf org assign permset -n recipes
Импортируйте некоторые образцы данных.
sf data tree import -p ./data/data-plan.json
Если ваша организация еще не открыта, откройте ее сейчас:
sf org open -o mydevorg
В разделе «Настройка» в разделе «Темы и брендинг» активируйте тему Recipes Lite или Recipes Blue .
В панели запуска приложений выберите приложение LWC .
Этот репозиторий содержит несколько файлов, которые будут полезны, если вы хотите интегрировать современные инструменты веб-разработки в процессы разработки Salesforce или в процессы непрерывной интеграции/непрерывного развертывания.
Prettier — это средство форматирования кода, используемое для обеспечения единообразного форматирования всей вашей кодовой базы. Чтобы использовать Prettier с Visual Studio Code, установите это расширение из Visual Studio Code Marketplace. Файлы .prettierignore и .prettierrc предоставляются как часть этого репозитория для управления поведением средства форматирования Prettier.
Предупреждение. Текущая версия плагина Apex Prettier требует установки Java 11 или более поздней версии.
ESLint — популярный инструмент проверки JavaScript, используемый для выявления стилистических ошибок и ошибочных конструкций. Чтобы использовать ESLint с Visual Studio Code, установите это расширение из Visual Studio Code Marketplace. Файл .eslintignore предоставляется как часть этого репозитория для исключения определенных файлов из процесса проверки в контексте разработки веб-компонентов Lightning.
Этот репозиторий также поставляется с файлом package.json, который позволяет легко настроить перехватчик предварительной фиксации, который обеспечивает форматирование кода и проверку, запуская Prettier и ESLint каждый раз, когда вы git commit .
Чтобы настроить крючок предварительной фиксации форматирования и проверки:
Установите Node.js, если вы еще этого не сделали.
Запустите npm install в корневой папке вашего проекта, чтобы установить модули ESLint и Prettier (Примечание: пользователи Mac должны убедиться, что инструменты командной строки Xcode установлены, прежде чем запускать эту команду).
Prettier и ESLint теперь будут запускаться автоматически каждый раз, когда вы фиксируете изменения. Коммит завершится неудачно, если будут обнаружены ошибки линтинга. Вы также можете запустить форматирование и проверку из командной строки, используя следующие команды (полный список см. в package.json):
npm run lint npm run prettier
Code Tours — это пошаговые руководства, которые помогут вам лучше понять код приложения. Чтобы иметь возможность их запускать, установите расширение CodeTour VSCode.
