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