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作为晚辈的开发方式,开发流程图:

AngularJS 1

消设置配置的软件和条件一旦下图:

  • NodeJS Long
    Term Support (LTS)
    version

  • Visual
    Studio Code

  • Python
    2.7.x

若果使用Visual
Studio,还欲如下

  • Visual
    Studio 2015 plus Latest Update
    3

  • NodeJS
    Tools for Visual Studio

1.2支出类库介绍

  • TypeScript

TypeScript是比JavaScript更高级的语言,TypeScript中得以定义数据类型,接口,类,等等并且TypeScript最终可以编译成JavaScript,SharePoint的client-side
development tools就是行使Type Script的接近,模型和接口来构建的。
关于TypeSctipt更多的详细信息请见要下链接:

  • TypeScript
    Quick
    Start

  • TypeScript
    PlayGround

  • TypeScript
    Handbook

  • TypeScript
    community on Stack
    Overflow

     

  • JavaScript
    Frameworks

汝可以用于熟悉的JavaScript框架来
开发client-side web parts,以下是比流行的JS框架:

  • React

  • AngularJS
    1.x

  • Angular
    2 for Type Script
    2.x

  • Handlebars

坐编写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更多信息要见下链接:

  • About
    Node.js

  • Node.js
    API reference documentation

  • Node.js
    Usage and Example

     

  • 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.

  • Compile
    LESS or SASS files to CSS.

  • Compile
    TypeScript files to JavaScript.
    更多关于Gulp的信要见要下链接

  • Getting
    started with
    Gulp

  • TypeScript
    and
    Gulp

  • Articles
    about
    Gulp

     

  • Yeoman
    generators

Yeoman用于创造新的client-side
web
parts的工,一旦工程创建了之后,你可挑选自己好的IDE进行开发,常用的IED是Visual
studio Code,Sublime Text或者Atom。更多信息见要下链接:

  • Scaffold
    a web app with Yeoman

  • List
    of available Yeoman generators

     

  • 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的下令行如下图:

    AngularJS 2

    AngularJS 3

     

    AngularJS 4

     

    AngularJS 5

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

    AngularJS 6

    起如下后,表示既成运行
    npm V3,如下图:

    AngularJS 7

2.2装置编码工具

  1. 安装Visual Studio
    Code

运代码编辑,我们这里以Visual Studio
Code,如下图:

AngularJS 8

 

AngularJS 9

 

AngularJS 10

AngularJS 11

AngularJS 12

AngularJS 13

AngularJS 14

设置完成如下图:

AngularJS 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

率先潮运行运行而下图:

AngularJS 16

 

AngularJS 17

 

AngularJS 18

末段安装成功使下图:

AngularJS 19

只要已经设置了,但是先检查下,还是运行该命令行,如下图:

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

AngularJS 21

起来设置,如下图:

AngularJS 22

 

AngularJS 23

说到底安装好,如下图:

AngularJS 24

 

瞩目:根据实际需要,还好安装如下工具(不是必选的),如下图:

  • Fiddler

  • Postman
    plugin for
    Chrome

  • Cmder
    for Windows

  • Oh
    My Zsh for Mac

  • Git
    source control tools

 

1. 创建SharePoint client-side webpart

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

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

    AngularJS 26

     

    AngularJS 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.1AngularJS创建平安关系

预览webpart, The
client-side默认采用https进行访问的,默认没有关系在条件遭到创造,因此SPFx
toolchain可以帮你创造安装一个支出证书,运行而下命令行:

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

AngularJS 28

回车继续,如下图:

AngularJS 29

选料【是】则装证书,如下图:

AngularJS 30

证书安装收尾。

3.2.2运行预览webpart

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

AngularJS 31

AngularJS 32

AngularJS 33

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

AngularJS 34

 

末了出现IE浏览的workbench,如下图:

AngularJS 35

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

AngularJS 36

填补加webpart后要下图:

AngularJS 37

3.2.3望移动端的运转效果

AngularJS 38

顾:IE11产之2个走端切换,是空的,也许是单BUG或预览版本的题目,如下图:

AngularJS 39

  1. 手机配备下之作用图:

本人转化搜狗浏览器,选择点【Mobile】图标进行手机移动端效果(默认iphone5)查看。如下图:

AngularJS 40

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

AngularJS 41

每当切换到Lumia
520下之效应,如下图:

AngularJS 42

 

  1. 平板计算机下之意义图:

以搜狗浏览器点【Tablet】,默认IPad下之机能图:

AngularJS 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列表

未完待续

 

相关文章