SharePoint Framework (SPFx)安装配备以及开发-基础篇

 

1. 前言

SharePoint
Framework(SPFx),是页面
和Webpart的模型,完全援助地点开发(即完全可以退出SharPoint环境在当地开展支付),SPFx包含了一多重的client-side
JavaScript类库用于开发你的solution,下边介绍一下用以支付client-side web
parts的工具和类库.

1.1为何接纳SPFx

在SharePoint Online出来从前,对于SharePoint WebPart的支出,基本上都是编写C# code,然后编译成dll,部署到客户的Farm中,不过在SPO出来未来这种办法显著已经不得以了,为了化解这一个问题,微软第一引入了如下二种办法:

  • JavaScript注入格局

在SPO中最常用的Webpart就是Content
Editor和Script Editor,你可以接纳JSOM或者REST
API读取数据,然后显示在页面上,使用起来相比便利。不过这种措施仍旧有成百上千的败笔,例如:

  • 布局起来相比费心。
  • 不可以给客户提供客观的配备界面,多数安排消息都是在code中写的。
  • End
    user很容易不小心把code修改坏了,导致webpart不做事。

  • 最要紧的是Script
    Editor并不是”Safe For Scripting”多数Self-service
    站点都会敞开一个NoScript的feature,这样Script
    Editor中的脚本会被Block。

  • SharePoint
    add-in方式

现阶段可比盛行的不二法门就是利用SharePoint
Host的App
Part的不二法门,这种措施实际是把webpart做为一个Iframe引入到页面中,AppPart对应的页面实际上运行在一个独门的site里面,这种webpart可以增长到NoScript的站点中。可是这种方法也有部分通病首要如下:

  • 这个code运行在Iframe中,这种方法会比Script
    Editor的措施慢,因为这种方法索要请求另一个页面,另一个页面也亟需展开身份验证等操作。
  • 这种方法很难实现响应式布局,因为这些webpart实际上是在不同的页面中的,并且对于Iframe,Media
    query得到的屏幕尺寸实际上是Iframe的肥瘦,并不是真的含义上的屏幕宽度

结论:为理解决地点的多少个问题,所以微软生产了SharePoint
Framework作为晚辈的开发模式,开发流程图:

图片 1

需要安装配置的软件和条件如下图:

倘若利用Visual
Studio,还需要如下

1.2开支类库介绍

  • TypeScript

TypeScript是比JavaScript更尖端的语言,TypeScript中能够定义数据类型,接口,类,等等并且TypeScript最终得以编译成JavaScript,SharePoint的client-side
development tools就是应用Type Script的类,模型和接口来构建的。
关于TypeSctipt更多的详细新闻请见如下链接:

  • JavaScript
    Frameworks

您可以选拔相比熟稔的JavaScript框架来
开发client-side web parts,以下是相比盛行的JS框架:

因为编写client-side
web part多数都是和SharePoint进行交互,所以这里提议大家使用SharePoint PnP JavaScript Core
library
 框架,在那个框架中早已为我们封装好了成百上千简易易用的API。

 

  • Node Package
    Manager (npm)

SharePoint
client-side 开发工具使用npm来治本倚重以及必要的Js库,安装Node.js会自动安装npm。

 

  • Node.js

Node.js是一个开源,用于运行JavaScript
代码的跨平台运行条件。Node.js类似于IIS
Express和IIS。关于Node.js更多消息请见下面链接:

  • Gulp task
    runner

SharePoint
client-side 开发工具使用gulp装进工具做如下操作:

  • Bundle
    and minify JavaScript and CSS files.

  • Run
    tools to call the bundling and minification tasks before each build.

  • Yeoman
    generators

Yeoman用于制造新的client-side
web
parts的工程,一旦工程创制完毕之后,你可以选用自己喜好的IDE举行支付,常用的IED是Visual
studio Code,Sublime Text或者Atom。更多音信见如下链接:

  • SharePoint
    REST API

SharePoint
REST
API重要用来和SharePoint环境相互,例如:添加删减修改list中的数据等等。

 

1. 安装配置

2.1装置开发工具

  1. 安装Node.js
  • 安装NodeJS Long Term Support
    (LTS) v4.x.x (node-v4.5.0-x64.msi)version,安装如下:
![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192126916-957218226.png)

点【Next】下一步,选择选中复选框,如下图:


![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192127306-2093014911.png)

选择安装目录,如下图:


![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192127775-181774183.png)

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192128197-111211785.png)

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192128728-1850302687.png)

 

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192129135-1418309253.png)

 

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192129760-1838361813.png)
  • 比方已经安装了Node.js,可以用命令行:node -v
    检查下node.js的版本是否符合要求?以管理员身份的法子打开Node.js的一声令下行如下图:

    图片 2

    图片 3

     

    图片 4

     

    图片 5

  1. 运作安装 npm
    V3,输入命令行:npm install -g
    npm@3,如下图:

    图片 6

    出现如下后,表示早已成功运行
    npm V3,如下图:

    图片 7

2.2装置编码工具

  1. 安装Visual Studio
    Code

应用代码编辑,大家这里运用Visual Studio
Code
,如下图:

图片 8

 

图片 9

 

图片 10

图片 11

图片 12

图片 13

图片 14

设置到位如下图:

图片 15

  1. 安装windows-build-tools
windows-build-tools
将安装**Visual C++ Build Tools
2015和Python 2.7**,运行如下命令:**npm install -g --production
windows-build-tools,**打开Node.js的命令行,如下图:


![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192137541-1605739767.png)

**开始在线下载工具,并进行自动配置,如下图:**


![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192138119-823915217.png)

 

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192138588-561974078.png)

 

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192139260-1454041410.png)

 

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192139806-1073581220.png)

**开始安装python脚本环境,如下图:**


![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192140275-1608228630.png)

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192140963-93086667.png)

 

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192141650-1857811724.png)

最后安装完成,如下图:


![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192142056-590049038.png)

安装编码环境和工具已经到位。

2.3安装Yeoman and gulp

Yeoman扶助您起来新的花色,并保障高效和极品,SharePoint客户端开发工具包括一个用来创制新的Web部件 Yeoman
generator。那一个工具包括常见的规范代码和一个通用的web站点供host给webpart做测试使用。打开Node.JS命令行输入下命令:

npm
install -g yo gulp

率先次运行运行如下图:

图片 16

 

图片 17

 

图片 18

终极安装成功如下图:

图片 19

如果已经设置过,可是先反省下,仍旧运行该命令行,如下图:

图片 20

2.4安装Yeoman SharePoint generator

The
Yeoman SharePoint web part generator helps you quickly create a
SharePoint client-side solution project with the right toolchain and
project structure.

开辟Node.js命令行,运行如下命令:

npm
install -g @microsoft/generator-sharepoint,如下图:

图片 21

千帆竞发设置,如下图:

图片 22

 

图片 23

终极安装到位,如下图:

图片 24

 

瞩目:遵照实际需要,仍能安装如下工具(不是必选的),如下图:

 

1. 创建SharePoint client-side webpart

创建client-side
webpart的流程图如下: 

图片 25

3.1成立新的webpart

创设一个新的Hello
World的WebPart,如下步骤:

  1. 创建一个hello
    word 目录工程,运行如下命令行:md
    helloworld-webpart,如下图:
![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192148478-1251960323.png)

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192149103-1258472686.png)
  1. 进去hello
    world的目录,运行命令行:cd
    helloworld-webpart,如下图:
![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192149619-544383352.png)

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192150275-1871567808.png)
  1. 运行 Yeoman SharePoint
    Generator创建hello world的webpart。运行命令行:yo @microsoft/sharepoint,如下图:

    图片 26

     

    图片 27

    拔取默认的或Y,往下走:

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192152244-1187754292.png)

选择默认的,一路回车往下走:


![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192152900-752012313.png)

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192153931-175751516.png)

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192154494-291404993.png)

![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192155431-2011149778.png)

创建完毕,如下图:


![](https://images2015.cnblogs.com/blog/115581/201701/115581-20170111192156025-1878892846.png)

3.2预览新创立的webpart

3.2.1创造安全证书

预览webpart, The
client-side默认接纳https举行走访的,默认没有讲明在环境中开创,由此SPFx
toolchain可以帮您创造安装一个开支证书,运行如下命令行:

gulp
trust-dev-cert,运行如下图:

图片 28

回车继续,如下图:

图片 29

分选【是】则设置证书,如下图:

图片 30

证件安装完毕。

3.2.2周转预览webpart

使用命令行运行预览webPart,运行命令行:gulp
serve,如下图:

图片 31

图片 32

图片 33

选择【IE浏览器】,如下图:

图片 34

 

最后现身IE浏览的workbench,如下图:

图片 35

选择点【+】J进行webpart的添加,如下图:

图片 36

添加webpart后如下图:

图片 37

3.2.3看看移动端的运行效果

图片 38

留意:IE11下的2个活动端切换,是空白的,也许是个BUG或预览版本的题目,如下图:

图片 39

  1. 手机设备下的意义图:

自家改成搜狗浏览器,选用点【Mobile】图标举行手机移动端效果(默认iphone5)查看。如下图:

图片 40

进展手机配备的切换,点击如下图所示:iphone
6 plus

图片 41

在切换来Lumia
520下的效能,如下图:

图片 42

 

  1. 机械电脑下的功力图:

在搜狗浏览器点【Tablet】,默认IPad下的功效图:

图片 43

如图上边手机配备一样,可以切换设备。这样一个完完全全的webpart就自行创造好了。

1. 应用Visual Studio Code查看源码

这里运用Visual
studio
Code查看源码,因为那一个轻量级的工具,可以跨平台运行,可以在Mac和Linux下开拓,当然有可以选取Visual
Studio的正式版本。

在Node.js命令行运行命令:code .(未完待续

1. 采纳Visual Studio 2015怎么创建一个webPart

未完待续

1. 何以修改代码扩充webPart属性

未完待续

1. 如何布置到正规的SharePoint环境中

未完待续

1. 如何创造一个SharePoint列表

未完待续

 

相关文章