WebStorm2017.1安装和配置

先导目录

 

1- 安装WebStorm2017.1

2- 安装node.js

3- 安装Angular2(typescript)

4- 创建WebStorm Project

 

一、 安装WebStorm2017.1

利用WebStorm2017.1开发，需要Angular2或者高版本的node.js（好像4以上）。

废话：

1）先说下WebStorm 是什么？

通过安装必要的语言插件，起到一个很好的整理脚本结构、code error 提示、错误定位的一个轻便的Web开发工具。

它支持很多前端开发语言，我们这里是Angular2(typeScript).

 

2) 软件下载和激活

  2.1) 下载地址：https://www.jetbrains.com/products.html?fromMenu   不要直接点首页下载，点All tools 然后选择javascript 语言选项。

 　　2.2） 激活

       激活是在安装过程中用到的。

       选择“license server” 输入：http://idea.imsxm.com/

3) 安装WebStorm2017.1

    默认安装就可以了。（哈哈，不截图了） 

 

二、 安装node.js

1） 下载地址： 官网https://nodejs.org/en/

 

 选择推荐即可。

2）安装node.js

过程就略了，跟一般的软件安装一样，傻瓜式的。

验证：

 

 3） 配置node.js

3.1）设置prefix和cache

打开cmd

执行以下两行：

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

3.2）配置环境变量：

A- 配置系统变量

NODE_PATH  C:\Program Files\nodejs\node_global\node_modules

B- 配置用户变量

 PATH 中添加  C:\Program Files\nodejs\node_global\

验证：

 

 

三、安装Angular2(typescript)

1）安装Angular2

三个命令：

A- 全局安装cnpm (来源于阿里的资料库)

npm install -g cnpm --registry=https://registry.npm.taobao.org

B- 全局安装typescript（基础依赖语言）

npm install -g typescript typings

C- 全局安装@Angular/cli(Angular2)

npm install -g @angular/cli

(如果下载完，出现可选项依赖没有完成，等待程序自动结束即可，先不管)

四、创建WebStorm Project

File----->New------>Project

 

 

wenstorm自动检索CLI目录

 

 刚载入的时候会出现以下画面， 没有发现node_modules.

 

那是因为你新建的project需要载入package.

 

 载入完成以后就是这样的：

 

然后右键点击

选择"show npm Scripts"

双击start

APP运行地址

http://localhost:4200