Angular 2使用WebStorm创建Angular 2项目

引言

由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。意识到我并不一定需要单独安装Angular CLI组件，因为我现在并不需要在后端直接运行JavaScript。因此写此文来记录使用WebStorm的Angular CLI组件来创建Angular项目。

如果有童鞋需要Angular CLI 安装指南，可参考Angular CLI 安装和使用。

介绍

两个概念：

• 关于Angular版本，Angular官方已经统一命名Angular 1.x统称为Angular JS；Angular 2.x及以上统称Angular；

• CLI是Command Line Interface的简写，是一种命令行接口，实现自动化开发流程，比如：ionic cli、vue cli等；它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

因为之前我没有做过前端开发，并不知晓为什么使用WebStorm开发AngularJS需要配置nodejs？真的有很大的疑惑。

Angular用nodejs主要是用它的npm工具包，npm里面有很多很方便的工具可以用在前端开发，例如:

• 合并js,css
• 压缩js
• 压缩图片
• 生成js的source map
• 编译 less 成css
• 运行测试unit test
• Grunt, Gulp任务管理，自动化上面所有的任务

Angular CLI是Angular2的一个工具，Angular2的核心团队为了解决开发人员在使用Angular2开发时环境搭建的麻烦，开发出了Angular CLI。

正文

首先要在电脑中配置好Angular-cli的工具,就是使用npm 命令安装Anguar-CLI。

然后打开WebStrom软件新建一个Angular-CLI项目,

第一个框中输入项目的名字
第二个选的是nodeJs安装的位置
第三个是Angular-CLI的文件夹位置（这个是使用npm命令安装的，npm install angular-cli -g ）,我是安装在了全局globla中，所以在选择这个文件夹的时候是全局中的angular-cli文件夹。

三个填完之后点击Create就能创建项目了,项目创建的很慢.等待项目出现的node_module文件夹后说明项目创建完成。

创建完成之后可以配置运行命令，在WebStrom的编辑框的右上角有个下拉框，选择Edit Configuration ，选择左上角的+号，然后选择npm命令，红色图标的那个

然后配置npm命令启动命令

完成之后确定保存之后就可以让项目跑起来了