SharePoint Framework (SPFx)安装配备以及支出-基础篇

三.贰.2运维预览webpart

动用命令行运维预览webPart,运转命令行:gulp
serve,如下图:

图片 1

图片 2

图片 3

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

图片 4

 

终极出现IE浏览的workbench,如下图:

图片 5

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

图片 6

添加webpart后如下图:

图片 7

1. 前言

SharePoint
Framework(SPFx),是页面
和Webpart的模子,完全协助地点开发(即完全可以脱离SharPoint环境在本地开始展览付出),SPFx包蕴了一名目繁多的client-side
JavaScript类库用于支付你的solution,上边介绍一下用于开发client-side web
parts的工具和类库.

三.贰.3探视移动端的运转效果

图片 8

留神:IE11下的1个运动端切换,是一介不取的,可能是个BUG或预览版本的题材,如下图:

图片 9

  1. 手提式有线电话机设备下的效劳图:

自己改成搜狗浏览器,采纳点【Mobile】图标进行手机移动端效果(私下认可iphone伍)查看。如下图:

图片 10

进展手提式有线电话机配备的切换,点击如下图所示:iphone
陆 plus

图片 11

在切换来Lumia
520下的功用,如下图:

图片 12

 

  1. 机械电脑下的效率图:

在搜狗浏览器点【Tablet】,私下认可IPad下的效劳图:

图片 13

如图上面手提式有线电话机配备壹样,能够切换设备。那样一个完好无缺的webpart就自动创造好了。

三.二.一创办平安评释

预览webpart, The
client-side默许选取https举办访问的,暗许没有评释在条件中创立,因而SPFx
toolchain可以帮你创立安装叁个支付证书,运营如下命令行:

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

图片 14

回车继续,如下图:

图片 15

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

图片 16

证书安装达成。

1. 什么样计划到正规的SharePoint环境中

未完待续

1.二开发类库介绍

  • 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. 创建SharePoint client-side webpart

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

图片 17

二.1安装开发工具

  1. 安装Node.js
  • 安装NodeJS Long Term Support
    (LTS) v四.x.x (node-v四.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的一声令下行如下图:

    图片 18

    图片 19

     

    图片 20

     

    图片 21

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

    图片 22

    并发如下后,表示已经成功运行npm V叁,如下图:

    图片 23

1. 如何成立叁个SharePoint列表

未完待续

 

 

三.2预览新创造的webpart

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,如下图:

图片 24

始于设置,如下图:

图片 25

 

图片 26

最后安装到位,如下图:

图片 27

 

专注:依据实际须要,还足以设置如下工具(不是必选的),如下图:

 

1. 应用Visual Studio Code查看源码

那里运用Visual
studio
Code查看源码,因为这些轻量级的工具,能够跨平台运行,能够在Mac和Linux下开拓,当然有能够选取Visual
Studio的行业内部版本。

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

1. 行使Visual Studio 20一5如何创制3个webPart

未完待续

二.二设置编码工具

  1. 安装Visual Studio
    Code

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

图片 28

 

图片 29

 

图片 30

图片 31

图片 32

图片 33

图片 34

安装达成如下图:

图片 35

  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)

设置编码环境和工具已经形成。

一.1怎么采取SPFx

在SharePoint Online出来从前,对于SharePoint WebPart的付出,基本上都是编写C# code,然后编译成dll,布署到客户的Farm中,不过在SPO出来今后那种办法一目理解已经不可能了,为了化解那几个题材,微软第叁引进了如下二种方法:

  • JavaScript注入方式

在SPO中最常用的Webpart正是Content
艾德itor和Script 艾德itor,你能够选择JSOM只怕REST
API读取数据,然后突显在页面上,使用起来比较便利。然则那种措施照旧有成都百货上千的败笔,例如:

  • 配备起来相比辛劳。
  • 不可能给客户提供合理合法的布局界面,多数布局音讯都以在code中写的。
  • End
    user很不难非常大心把code修改坏了,导致webpart不办事。

  • 最要害的是Script
    艾德itor并不是”Safe For Scripting”多数Self-service
    站点都会开启3个NoScript的feature,这样Script
    艾德itor中的脚本会被Block。

  • SharePoint
    add-in方式

近期可比盛行的办法就是运用SharePoint
Host的App
Part的点子,那种艺术实际上是把webpart做为2个Iframe引进到页面中,AppPart对应的页面实际上启动在1个独自的site里面,那种webpart能够加上到NoScript的站点中。不过这种措施也有1部分弱点首要如下:

  • 那几个code运维在Iframe中,那种措施会比Script
    艾德itor的法子慢,因为那种艺术亟待请求另多少个页面,另四个页面也须求进行身份验证等操作。
  • 那种艺术很难落实响应式布局,因为那些webpart实际上是在分裂的页面中的,并且对于Iframe,Media
    query获得的显示器尺寸实际上是Iframe的上涨幅度,并不是真正含义上的荧屏宽度

结论:为了缓解地点的五个难题,所以微软推出了SharePoint
Framework作为晚辈的开发方式,开发流程图:

图片 36

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

若果采纳Visual
Studio,还供给如下

1. 设置配备

三.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,如下图:

    图片 37

     

    图片 38

    慎选暗许的或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)

1. 怎么着修改代码扩展webPart属性

未完待续

2.3安装Yeoman and gulp

Yeoman扶助您从头新的类型,并保持快捷和极品,SharePoint客户端开发工具包含一个用来创立新的Web部件 Yeoman
generator。这些工具包蕴常见的典范代码和多少个通用的web站点供host给webpart做测试使用。打开Node.JS命令行输入下命令:

npm
install -g yo gulp

首先次运营运转如下图:

图片 39

 

图片 40

 

图片 41

末段安装成功如下图:

图片 42

假如已经安装过,不过先检查下,仍旧运营该命令行,如下图:

图片 43

相关文章