Создание веб-частей SharePoint Framework (SPFx)

При создании структуры SharePoint (SPFx) можно использовать библиотеку @pnp/sp, которая предоставляет множество API для использования, таких как REST-запросы, пакетная обработка, кэширование… и т.д.

В этой статье мы рассмотрим процесс настройки проекта SPFx без внедрения кода, предполагая, что ваша среда разработки уже настроена.

Если вы еще не сделали этого, вы можете обратиться к предыдущей статье о настройке быстрого окружения

Создайте новый проект

Используйте консольную команду для создания папки

md spfx-helloworld-example
Войдите в полноэкранный режим Выход из полноэкранного режима

Перейдите в созданную папку

cd spfx-helloworld-example
Войдите в полноэкранный режим Выход из полноэкранного режима

Запустите Yeoman’s SharePoint Generator для создания нового проекта веб-части

yo @microsoft/sharepoint
Войдите в полноэкранный режим Выход из полноэкранного режима

После успешного запуска появится следующий экран

Затем нужно ответить на ряд вопросов, и в основном для быстрой сборки можно выбрать параметры по умолчанию, за некоторыми исключениями

  • Какой тип компонента на стороне клиента создать? WebPart
    На выбор предлагается четыре типа клиентских компонентов — WebPart, Extension, Library и Adaptive Card Extension.

  • Как называется ваша веб-часть? CRUD
    По умолчанию веб-часть называется HelloWorld, мы изменим ее на CRUD.

  • Какой шаблон вы хотели бы использовать? Без рамок
    Есть два фреймворка на выбор Minimal и React, или No framework, если вы не используете фреймворк.

Затем мы даем ему продолжить работу, пока Yoeman запускает создание каркаса проекта (папки & файлы) и запускает npm install для установки необходимых зависимостей.

Наконец, сообщение Поздравляем ниже указывает на то, что проект был успешно построен!


На данный момент проект уже собран, поэтому используйте code . Используйте команду , чтобы открыть редактор, но прежде чем начать писать код, запустите проект, чтобы посмотреть, как он выглядит.

SharePoint имеет размещенный рабочий стол, который позволяет разработчикам предварительно просматривать и тестировать разработанную веб-часть на стороне клиента, а не развертывать проект непосредственно в SharePoint.

Как же вы это делаете? В папке проекта используйте команду gulp serve непосредственно для запуска локального веб-сервера и загрузки файлов. Откроется окно браузера по умолчанию, но вы обнаружите, что оно не работает, поэтому дважды проверьте URL этой страницы, который будет https://enter-your- sharepoint-site/_layouts/workbench.aspx и обнаруживаете, что он не работает, потому что в URL-адресе enter-your-sharepoint нужно ввести URL-адрес SharePoint и сайт

Это неправильно, не так ли? Слишком хлопотно менять URL при каждом запуске!

На самом деле, по умолчанию для запуска браузера используется указанный URL, а поскольку мы можем его указать, мы можем изменить местоположение! Перейдите в редактор и найдите . /config/serve.json и откройте его, изменив атрибут enter-your-sharepoint-site в initialPage на URL вашего собственного сайта, например, https: //contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx (это URL, указанный в документе, это нормально, если он не работает)

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "initialPage": "https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx"
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Запустите gulp serve снова и увидите, что SharePoint Workbench успешно запущен (источник изображения: Microsoft).

Добавление созданной веб-части на страницу (источник изображения: Microsoft)

Веб-часть по умолчанию (источник изображения: Microsoft)

В будущем вы можете использовать Workbench для предварительного просмотра или тестирования функциональности, чтобы убедиться, что она работает правильно, и на этом закончить!

Ссылка

Создание первой веб-части SharePoint на стороне клиента (Hello World, часть 1)


Спасибо, что прочитали статью 🌷 🌻 🌼

Если вам понравилось, пожалуйста, не стесняйтесь нажать кнопку сердечко ❤️
или следите за моим GitHub ⭐.
или купите мне кофе ⬇️ Я буду благодарен.


Оцените статью
devanswers.ru
Добавить комментарий