项目的创建和配置

在WebStorm中，选择File > New Project，然后选择Empty Project，在右边的Location设置好项目的位置，然后点击界面右下角的Create即可。

下面我们将一步一步的完善整个项目的结构。

首先建立一个public目录，并在public目录中建立js、css、img三个目录。如下图所示：

大家对于js/css/img三个目录的设置应该比较熟悉，他们分别用于存放对应的文件，img用于存放图片文件。

但是，为什么要把他们放置到目录中呢？

• 产品的文档
• 测试文档

这些文件我们是绝对不希望用户可以直接访问到的，通过设置一个public目录，并在部署时将网站的根目录直接指向到public目录，即可保证目录外的内容不被暴露到网络当中。

另外，这样设置的主要原因是为了使用git将整个项目都管理起来。通过git版本控制的方式来保证项目代码的完整性和安全性。具体的git的操作方法就不在本文中叙述了。

bower的配置可以通过手动创建文件或者命令行的方法来进行。我推荐使用命令行的方式来进行创建，这样可以更好的理解配置生成的文件的内容。如果不想通过命令行创建，也可以跳过下面命令行创建的部分，直接在下方生成的文件解析的部分，将文档内容拷贝过去。

WebStorm内置了命令行工具（调用系统的命令行功能），在左下角点击Terminal即可启用。

在命令行下运行bower init，你将会看到如下的若干选项，并会自动的在项目的根目录生成一个bower.json。

注：以下的汉字部分都是额外加入的注释。

如果您不希望bower配置文件这么复杂，那么可以手工最简化的创建。

只需要一个name字段即可让bower好好工作了。

由于我们建立了public目录，并且项目的根目录与网站根目录不同，因此，我们需要新建一个额外的.bowerrc文件，告诉bower将组件库下载到特定的目录。

在项目根目录创建.bowerrc文件，并在其中加入如下内容：

以上配置文件会告诉bower将文档下载到./public/components目录中。

至此，我们对bower的配置已经全部结束！现在项目看起来应该长这个样子：