ASP. Vnext Summary: Bower

1. Preface

If vs is claiming to be the IDE's second, the other Ides don't dare to call it first. The ox was so terrible that it had wayward capital. What breakthroughs do VS2015 have? The current official version has not been released, but the big directions and ideas have basically been determined. such as integrated development of Google Android and Apple iOS, and so on, this is not discussed here. Title, let's take a look at the bower (which is NPM technology) used in ASP. NET Vnext.

2. Overview

Speaking of Bower had to mention NPM. If you want to learn more about NPM technology, please login: https://www.npmjs.com, I don't dare to swim.

The Bower:web Package Configuration management tool allows you to download (from the GitHub website) and install or restore packages, typically processing static files such as JavaScript and CSS libraries.

Note: for a static file or DLL installation package, you can still use the NuGet Package Manager. In fact, I still think NuGet is better. But Microsoft in order to connect more hosting source platform, and NPM technology is widely used, so VS2015 to build the strongest IDE, integrated bower and other tools are not unexpected.

3. Create a project and directory description

3.1 Project Creation

To introduce and demonstrate, open the previous chapter of the VNext solution, right-click "Add"-"New Project-" template-"Visual c#-" Web:ASP.NET Web Application-"ASP. NET 5 Starter web. Project "name": Vnext.webstartertemplate. (Note: You can also use the empty empty template to create a project, and then add files such as the corresponding Bower.json.) But using the starter Web Template here has helped us to add it. ）

Waiting for the References folder will restoring a period of time (depending on how fast you access github to download files). Sometimes slower! ), when you are finished, set the project as Project startup item.

3.2 Directory Description

Wwwroot: The folder used by the static file. Includes HTML files, CSS files, image files, JavaScript files, and so on.

Project.json: Project configuration file. Lists the tools used by the NuGet package dependencies.

Package.json: Lists NPM packages.

Bower.json: Lists the bower packages.

Gruntfile.js: The configured grunt task.

Config.json: Configure the EF and database connection string settings.

3.3 Uninstall Delete

In order to demonstrate the use of bower, all here Uninstall Bower.json configuration and remove installed packages.

The Bower.json code is as follows:

Note: The uninstallation process is needless to say!

lib file full Delete:

4.bower Download the installation package

4.1 Configuring Bower.json

Open Bower.json and add the following code (before the version selection, wait for loading to appear):

Note: "^" means such as 2.x.x, that is, the main version 2 has been determined, minor version x and minor version x is not ready to be upgraded; "~" means such as 2.1.x, primary and secondary version 2.1 has been fixed, minor version x is undecided to upgrade.

After selecting a version, after saving the Bower.json file, look at the directory and it will appear (not installed):

4.1 Downloads

In the Bower.json jquery item, click the install package:

During the installation process, you can view the VS Output window:

OK, indicates that the Bower_comonents folder has been downloaded. To have solution Manager " Show All Files ":

See Bower jquery has no "not installed", but did not add the Dist JS file under the Lib file.

5. Install the installation package

5.1 Configuring Bower.json

5.2 Open Task Explorer

Right-click Gruntfile.js file:

Note: If you do not see the task ... Items, which can be found from the " View"-"Other windows" of vs. Right-click "Install" Key-"Run:

Note: If there is no install item, refresh it.

Rattle! No error, indicates OK.

To see the results again:

OK, copy succeeded. Oh, if not, what would you think of the problem? Please note that you are going to copy the file path from bower_comonents and Bower.json "exportsoverride" on the corresponding.

6. Complete Installation

6.1 Configuring Bower.json

{    "name":"vnext.webstartertemplate",    "Private":true,    "Dependencies": {        "jquery":"^2.1.3",        "Bootstrap":"^3.3.1",        "jquery-validation":"^1.13.1",        "jquery-validation-unobtrusive":"^3.2.2"    },    "Exportsoverride": {        "jquery": {            "":"Dist/*.*"        },        "Bootstrap": {            "JS":"Dist/js/bootstrap. {Js,min.js}",            "CSS":"Dist/css/*.*",            "Fonts":"Dist/fonts/*.*"        },        "jquery-validation": {            "":"dist/jquery.validate. {Js,min.js}"        },        "jquery-validation-unobtrusive": {            "":"jquery.validate.unobtrusive. {Js,min.js}"        }    }}

6.2 All installation Results

6.3 Running the program

Note: Modify the views\shared\_layout.cshtml jquery.js introduction path First.

OK, the description style and JS reference are correct.

7. Summary

The content of this chapter is still relatively simple, but how to install the static file installation package. For gruntfile.js configuration, the next chapter introduces grunt knowledge Replenishment.

ASP. Vnext Summary: Bower