地表最强IDE——VS2017(二)

万能脚手架：net core-cli

安装net core环境，进入https://dotnet.github.io/，

点击getting started,

下载SDK并安装。

 

打开cmd输入

 

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

 

 

安装DotnetCore项目模板

 

安装了已上21个项目模板，其中就包括angular、vue和react、react and redux项目

 

Vue作为现在最火的前端框架之一，以它的易用、灵活、高效,好吧，最重要的是好上手，吸引了一大部分开发者，再加上最近小程序开发框架-没朋友的开源，火的一塌糊涂，还会更火

mpvue

Vue.js in mini program

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

angular从版本2开始便作为微软主推框架，究其原因还是为了推广它自己的typescript，或者说是这二者互相选择吧，管他呢。

net core脚手架和其他脚手架的用法很相似，同样的跨平台，而且您不必学习任何.net知识，只需要敲几行命令，会用VS2017即可。

上面介绍了那么多vue和angular相关的信息，那么这里我们以React（windows环境下）为例：

1）cmd进入项目文件夹，输入dotnet new react ，项目开始创建，不用管它的手动说明，既然是开车我们就来自动的

2）这就是产生的文件，很干净吧

ClientApp文件夹下就是react项目

双击project文件reaccli.csproj，这里发现名字里少写了一个t，不过这不是重点啦

3）解决方案已经打开了

4）打开package.json文件，键盘ctrl+s保存一下，VS2017会自动执行npm install命令安装包，等着吧，不用担心npm的网络问题，npm失败，会改用bower继续安装的，如果再失败，可以先打开浏览器看看能不能上百度。。。

5）点击F5开始调试，会自动执行项目内置的命令，进行打包

推荐开发用谷歌浏览器和最新的edge浏览器，他们都是支持js调试的，

打包文件在wwwroot下的dist文件夹下

6）安装antd，生成的demo默认带的是bootstrap。中后台小项目也不想过多的关注样式等问题，适合用一些开箱即用的UI组件库了，比如antd

文档很给力，真正的开箱即用，那开始吧!

打开package.json,添加空键值对"":"",左侧输入antd ,下拉列表会出现相关的包，这里就选择第一个antd，

右侧版本号随便写一个数字，会有版本提示，一般第一个就是最新最稳定版本

鼠标放在antd这行，点击灯泡

可以进行排序，或者打开github中的包主页或官网

7）ctrl+s等待，bower异步安装,啥反应也没有的，antd的包有将近40M,如果电脑配置不高，或者网络不好的话就等着吧

安装完成的效果

在解决方案的依赖项里就能找到新添加的antd了

8）如果你懂c#，或者稍微想了解一下的话，这一步只需要你一丁点儿的精力，当然也可以直接下一步，不会影响开发的。

打开controller文件夹下的SampleDataController.cs文件

里面是测试用的webapi服务

全局检索 WeatherForecasts，在FetchData里有调用

如下：

      好了，我们现在就可以依样画葫芦，react开发人员自己就可以写简单的测试用的接口了，是不是和用nodejs的时候非常像呢？

      而且如果是非常小的项目，只需要几个服务，而且只是单纯的网站项目，那就索性都写脚手架里直接发布也是可行的，也不用去考虑啥跨域的问题了，小项目吗，还分离它干啥。

      其实C#6.0之后开始玩命借鉴F#,python,typescript，用react的你肯定知道函数式编程，这就够用了，再一不小心知道有个元组类型，那真是perfect，别去深入研究啦，因为等下个版本C#8.0一出来，你会发现，我去，这不就是C++么。还真不是开玩笑，自己去看看更新预告就知道了！

9）网站发布

选择文件夹方式，一直点下一步到发布完成，然后这篇就结束了。

类似nodejs web服务器用的http-server，netcore使用红隼服务器（Kestrel）

网站发布之后，iis需要安装AspNetCoreModule模块来反向代理，而linux呢，有nginx做反向代理就简单了，修改下配置文件就行了。

不过这些运维的事情在这里就不做详细的说明了，反正我们开发过程也用不到80端口，一个F5就够了。

下一篇将演示打开各种web项目