При создании структуры 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 ⭐.
или купите мне кофе ⬇️ Я буду благодарен.
