Visual Studio 2015和ASP.NET 5中可用的前端开发工具集
最近微软发布了一本白皮书,谈到了一些可以和Visual Studio 2015和ASP.NET 5配合使用的JS/前端Web开发工具(比如:函数库、任务执行器、框架等)。
由于现在前端开发的生态系统在快速增长,也变得越来越复杂和庞大。所以,微软特意发布了这么一个白皮书来讲解一些可以集成到VS 2015用于ASP.NET 5开发的前端工具库。这些前端工具库,都能很好的被VS2015所支持,比如提供智能提示等内置特性。
每个涉及的工具库都给出了入门介绍、基本概念,以及在VS和ASP.NET中的用法。这个白皮书完全就是一个非常难得的前端开发入门手册。
具体涉及到的工具库有:
- 流行的JS任务执行器:Grunt和Gulp。两者都可以自动对脚本进行压缩、对TypeScript编译、对代码质量进行分析、对CSS进行预处理等。两者的区别在于,Grunt出现的较早,使用相对广泛;而Gulp出现较晚,但是相对轻量级性能也更好。VS2015默认使用Grunt,当然Gulp也可以很容易使用。
- 包管理器:NPM和Bower。虽然两者都是包管理器,不过NPM更多是安装开发环境的包,Bower是安装运行环境的前端包。所以白皮书着重介绍的Bower。同时VS2015也直接通过Bower来加载前端库。另外,对于node.js,前不久微软刚刚发布了node.js Tools for Visual Studio,可以让大家很方便的在VS中开发node.js应用。
- 自适应Web框架:Bootstrap。大名鼎鼎的Bootstrap我想就不用过多介绍了。之前要使用Bootstrap只能通过NuGet来安装,现在也可以使用Bower、npm来安装。
- 美化应用程序:Less、Sass和Font Awesome。Less和Sass都CSS预处理工具库。而Font Awesome提供大量的矢量图标可以免费使用。
- 企业级JavaScript开发:TypeScript。此白皮书对TS给出了一个非常好的入门向导。同时讲到现在一些流行的js库(比如jQuery、angularjs、Boostrap、d3、requirejs、knockoutjs、node.js)都提供了TS的定义接口文件。我之前也谈到了TypeScript可能会“脱颖而出”——见文章“TypeScript的崛起”。
- MVVM函数库:KnockoutJS。一个很好支持Model-View-ViewModel模式的前端函数库。当然Knockout并非一个完整的SPA(单页应用)库,需要配以Durandal和Requirejs才能更好的开发大型js应用。
- MVC函数库:Backbone。顾名思义,一个可以让你以MVC模式来实现前端开发的函数库。不过,你可以只使用其中的一部分功能,这样方便迁移和入门。
- SPA框架:AngularJS。不仅介绍了1.x的入门和关键组件的使用。还简要介绍了Angular 2.0。
- 可重用的UI组件框架:ReactJS。ReactJS主要是用来构建可重用的UI组件的,可以和MVC或MVVM框架配合,来更方便的开发视图部分。
通过阅读这个白皮书的内容,基本可以了解如何在VS2015中使用这些流行前端工具库。在我看来,VS2015对于.NET程序员而言(也即后端使用ASP.NET相关技术开发),绝对是首选的前端开发IDE了。
下载白皮书下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=46417
Visual Studio 2015和ASP.NET 5中可用的前端开发工具集的更多相关文章
- 让Visual Studio 2015 支持ASP.NET MVC4.0.0.1
近日装上了Visual Studio 2015 ,打开之前vs2013创建的MVC4的项目发现无法编译通过,提示System.Web.MVC,System.Web.WebPages 等找不到,网上搜索 ...
- Visual Studio 2015创建ASP.NET MVC流程
本文链接:https://blog.csdn.net/begindong/article/details/68059437本人这两天第一次对c#进行系统学习,写出来做个学习记录和大家分享,以下有什么错 ...
- Visual Studio 2015打开ASP.NET MVC的View提示"Object reference not set to an instance of an object"错误的解决方案
使用Visual Studio 2013打开没有问题,但Visual Studio 2015打开cshtml就会提示"Object reference not set to an insta ...
- Visual Studio 2015创建ASP.NET5项目“DNX SDK version 'dnx-clr-win-x86.1.0.0-beta5' 无法安装的错误
使用asp.net5建立web application时遇到DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装的错误 解决办法: 运行cmd: 1.输入: @pow ...
- Visual Studio 2015官方汇总包括下载和视频
7月20日 23:30 Visual Studio 2015正式版正式发布,作为微软新一代开发利器,在全地球乃至全宇宙乃至全太阳系中最强大 且没有之一的IDE(上述描述来自微博用户评论)跨平台支持成 ...
- ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower开发Web程序
基于Visual Studio 2015,你可以: 方便的管理前端包,如jQuery, Bootstrap, 或Angular. 自动运行任务,如LESS.JavaScript压缩.JSLint.Ja ...
- Visual Studio 2015 开发 ASP.NET 5 有何变化?
本篇博文目录: ASP.NET 5 模版 ASP.NET 5 目录结构 前端管理工具 无编译开发 Microsoft Git Provider 智能感知和错误信息 Smart Unit Testing ...
- Visual Studio 2015 开发 ASP.NET 5 有何变化?(转)
出处:http://www.cnblogs.com/xishuai/p/visual-studio-2015-preview-asp-net-5-change.html 本篇博文目录: ASP.NET ...
- Visual Studio 2015无法进行Package Restore的原因和解决方案
这篇文章是记录在我的当前电脑上面,安装Visual Studio 2015 Community Edition出现的无法进行Package Restore的问题,很可能在你的电脑上面无法重现.我的环境 ...
随机推荐
- 宿主机为linux、windows分别实现VMware三种方式上网(转)
一.VMware三种方式工作原理1 Host-only连接方式 让虚机具有与宿主机不同的各自独立IP地址,但与宿主机位于不同网段,同时为宿主主机新增一个IP地址,且保证该IP地址与各虚机IP地址位于 ...
- Jquery中的 height(), innerHeight() outerHeight()区别
jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...
- this prototype 闭包 总结
this对象 整理下思路: 一般用到this中的情景: 1.构造方法中 function A(){ this.name="yinshen"; } var a=new A(); co ...
- 看了让人笑了很多很多次的NB的痔疮经历
前言 这篇杂记其实是去年也就是 2013年9月30日转载的,后来在整理博客分类时七弄八弄误删掉了好多文章,就包括这一篇.今天,2014年9月29日,恰好恰好一年的时候居然在好久未登陆的 OneNote ...
- thinkphp中I方法
概述 正如你所见到的一样,I方法是ThinkPHP众多单字母函数中的新成员,其命名来自于英文Input(输入),主要用于更加方便和安全的获取系统输入变量,可以用于任何地方,用法格式如下:I('变量类型 ...
- Android Broadcast Receiver 使用入门
Broadcast Receiver 的使用 1.Broadcast Receiver简介 2.Broadcast Receiver接收系统自带的广播 3.自 ...
- 2012年湖南省程序设计竞赛E题 最短的名字
题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1115 解题报告:输入n个字符串,让你求出可以用来区别这些字符串的最少的前缀总共有多少个字 ...
- PHP学习之一晚撸下W3chscool
PHP 多维数组 其实简单的而言,多维数组就是由单个的数组组成的,两个数组嵌套组成一个二维数组,三个顾名思义就是三维数组. 先来一个简单的数组. 数字是key,引号里的是value <?php ...
- Nginx图片剪裁模块探究 http_image_filter_module
官方地址:http://nginx.org/en/docs/http/ngx_http_image_filter_module.html 煮酒品茶:前半部安装和官方说明,后半部分实践 #yum ins ...
- neutron 中 flat vlan gre vxlan的区别
In a flat network, everyone shares the same network segment. For example, say 2 tenants are sharing ...