npm包generator-spfx-pnpjs-uifabric-starter使用教程

什么是generator-spfx-pnpjs-uifabric-starter

generator-spfx-pnpjs-uifabric-starter是一个npm包,用于使用TypeScript和React的SharePoint Framework(SPFx)项目的生成器。它包含PnPJS和Office UI Fabric React库的引用,使得用户可以快速开始开发具有PnPJS数据访问和UI Fabric组件的项目。

如何使用generator-spfx-pnpjs-uifabric-starter

前置条件

在开始使用generator-spfx-pnpjs-uifabric-starter之前,需要从以下位置获取和安装必要的软件和工具:

安装generator-spfx-pnpjs-uifabric-starter

要安装并开始使用generator-spfx-pnpjs-uifabric-starter,请按照以下步骤进行操作:

  1. 在命令提示符中输入以下命令安装yeoman:
--- ------- -- --
  1. 在命令提示符中输入以下命令,以安装generator-spfx-pnpjs-uifabric-starter:
--- ------- -- -------------------------------------
  1. 在命令提示符中输入以下命令,创建一个新的SPFx项目:
-- ---------------------
  1. 选择您喜欢的SPFx Web部件或扩展,然后在“生成器概览”屏幕上选择“Other”选项。

  2. 填写其他有关项目的详细信息,并在提示输入“generator-spfx-pnpjs-uifabric-starter”时输入它。

  3. 输入SPFx项目所需的其他信息,例如项目名称,组织名称等。

  4. 选择您要使用的SPFx版本。

  5. 选择您的PnPJS版本,或者接受默认版本。

  6. 输入您要使用的CSS框架,或者接受默认框架。

  7. 等待生成器创建项目并安装所需的依赖项。

使用generator-spfx-pnpjs-uifabric-starter

完成以上步骤后,您可以开始使用generator-spfx-pnpjs-uifabric-starter。

运行以下命令以构建项目:

--- --- -----

要在本地调试项目,请运行以下命令:

---- -----

在此阶段,您可以参考Office UI Fabric和PnPJS文档,并从中了解有关它们使用和API的更多信息。

generator-spfx-pnpjs-uifabric-starter示例代码

在generator-spfx-pnpjs-uifabric-starter创建的SPFx项目中,您可以看到以下类型的示例代码:

PnPJS

------ --- ---- ------------

-- ----------------
----------------------------------------- -- -
  -----------------------
---

Office UI Fabric React

------ - -- ----- ---- --------
------ - ------------- - ---- ------------------------------------

------ --------- ---------------- -
  ------------ -------
-

------ ------- ----- ---------- ------- --------------------------------- --- -
  ------ --------- ------------------------------------ -
    ------ -
      -----
        -------------- ----------- ------ --
        -------------------------------------
      ------
    --
  -
-

总结

generator-spfx-pnpjs-uifabric-starter是一个强大的工具,可以帮助您快速启动和开发SPFx项目,包含PnPJS和Office UI Fabric React库的引用。在使用此工具之前,请确保您具备适当的SPFx和TypeScript知识,并遵循Microsoft提供的最佳实践。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066b6051ab1864dac6726c


猜你喜欢

  • npm 包 booting.min.js 使用教程

    简介 booting.min.js 是一个小而强大的 JavaScript 库,可以用于实现网站 loaded/ready 时的动画效果。它的特色是体积小(压缩后只有 2KB)且易用。

    3 年前
  • npm 包 @infctr/bem-cn 使用教程

    BEM 是面向组件的 CSS 架构风格,它的核心是将页面分解成不同的组件,并使用块、元素、修饰器的方式来定义 CSS 样式。而 @infctr/bem-cn 是一个 npm 包,旨在提供一种更加灵活和...

    3 年前
  • npm 包 @infektweb/conventions 使用教程

    前言 在开发前端项目的过程中,我们经常需要在不同页面或组件之间共享数据或者使用某些第三方插件等。为了解决这些问题,我们通常需要使用一些规范或者命名约定来统一管理我们的代码。

    3 年前
  • npm 包 chat.min.js 使用教程

    简介 chat.min.js 是一个轻量级的 JavaScript 库,用于在前端实现在线聊天功能。它可以帮助前端开发者快速地集成聊天系统,优雅地展示聊天记录并实现即时通讯。

    3 年前
  • npm包@ifiske/cordova-plugin-fcm使用教程

    在现代移动应用程序中,推送通知成为了通信和发布的主要方式。Firebase Cloud Messaging(FCM)是Google提供的一项免费服务,为开发人员提供了在移动应用程序中发送“云消息”(以...

    3 年前
  • npm 包 chart.min.js 使用教程

    前言 在前端开发中,图表是很常见的需求。为了方便地实现图表的绘制,许多前端开发者都采用了 chart.min.js 这个优秀的 npm 包。本文将着重介绍如何使用 chart.min.js ,并附上详...

    3 年前
  • npm包@ifours/react-native-page-view使用教程

    简介 @ifours/react-native-page-view是一种React Native组件,可以用于创建水平页面视图,用户可以在这些页面间滑动。 安装 要安装@ifours/react-na...

    3 年前
  • npm 包 @influitive/icons 使用教程

    在前端开发中,图标设计是一个非常重要的部分。随着项目越来越复杂,手动维护图标库变得不可行,因此使用第三方图标库来管理图标变得非常实用。@influitive/icons 是一个非常实用的图标库,能够帮...

    3 年前
  • npm 包 byte.min.js 使用教程

    在前端开发中,经常需要处理字节单位的数据。byte.min.js 是一个帮助开发者轻松处理字节单位数据的 npm 包。 在这篇文章中,我们将学习如何使用 byte.min.js,并看一些示例代码。

    3 年前
  • npm 包 @influential/elm 使用教程

    简介 @influential/elm 是一款基于 Elm 编写的前端组件库,可以帮助开发者快速构建高品质的交互界面。它提供了一系列常用的 UI 组件、布局容器以及样式工具,支持自定义主题并且易于扩展...

    3 年前
  • npm 包 @ignavia/draph 使用教程

    简介 @ignavia/draph 是一个基于 D3.js 实现的可视化图表库,支持多种图表类型和交互方式。它提供了易于使用和配置的 API ,可以在前端应用程序中快速集成。

    3 年前
  • npm 包 @ignavia/rdf 使用教程

    随着前端开发越来越复杂,处理数据变得非常重要。@ignavia/rdf 就是一个帮助我们处理数据的 npm 包。在本文中,我们将讲解如何使用它。 安装 我们可以使用 npm 安装 @ignavia/r...

    3 年前
  • npm 包 chrome.min.js 使用教程

    在前端开发中,我们经常需要使用一些浏览器相关的特殊功能,如操作浏览器标签页、访问浏览器本地存储等。对于这些特殊功能,我们可以使用 Chrome 浏览器提供的开发者工具来实现,但需要手动操作,不够方便。

    3 年前
  • npm 包 @ignavia/hfld 使用教程

    介绍 在前端开发中,我们经常需要处理一些复杂的数据类型,其中包括由多个子对象组成的对象数组。当我们需要对这样的数据进行排序、过滤或查找时,代码中就需要大量的循环、判断语句。

    3 年前
  • npm 包 @info.nl/bootload 使用教程

    简介 在前端开发中,我们经常需要加载一些外部资源,比如样式表、脚本等等。通常情况下,我们可以通过在 HTML 中引用这些资源来实现。 然而,有时候我们需要动态加载这些资源,而此时就需要用到一个类似于“...

    3 年前
  • npm 包 @info.nl/delegate 使用教程

    @info.nl/delegate 是一个非常有用的 npm 包,它可以轻松地为 DOM 元素添加事件代理。在这篇文章中,我们将学习如何使用 @info.nl/delegate。

    3 年前
  • npm 包 @info.nl/eslint-config 使用教程

    在现代的前端开发中,代码规范在代码质量与协作上扮演着重要的角色。而 eslint 作为一个流行的 JavaScript 代码检查工具,可以帮助开发者很好地实现代码规范化。

    3 年前
  • npm 包 @info.nl/fluxible-router-fork 使用教程

    在前端开发中,路由是构建 Web 应用程序必不可少的组成部分。Fluxible Router 是一个 React 应用中的高性能路由库,以允许在应用程序中定义路由并启用服务器端渲染。

    3 年前
  • npm 包 @info.nl/delegator 使用教程

    在前端开发中,我们经常需要处理复杂的业务逻辑和交互效果。为了提高开发效率和代码质量,我们常常需要使用一些工具和库来辅助开发。npm 包 @info.nl/delegator 就是这样一个非常强大的工具...

    3 年前
  • npm 包 @info.nl/eslint-config-berlin 使用教程

    简介 @info.nl/eslint-config-berlin 是 Berlin 团队在开发过程中所使用到的 eslint 配置规范的 npm 包。主要用来规范前端代码的编写,确保代码的质量和一致性...

    3 年前

相关推荐

    暂无文章