此文档主要简述如何在windows（本文使用的是windows7 64位操作系统)下配置Node环境并运行NiceFish项目(基于Angular2的开源项目)：

安装WebStorm（前端开发IDE）

官网地址：https://www.jetbrains.com/webstorm/

(1) 注册码

因为WebStorm是收费软件，下面是开源社区提供的注册码（如果有能力希望支持付费正版）。如果注册失败，请添加0.0.0.0 account.jetbrains.com到hosts(C:\Windows\System32\drivers\etc)

1
EB101IWSWD-eyJsaWNlbnNlSWQiOiJFQjEwMUlXU1dEIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ29uY3VycmVudFVzZSI6ZmFsc2UsInByb2R1Y3RzIjpbeyJjb2RlIjoiSUkiLCJwYWlkVXBUbyI6IjIwMTgtMTAtMTQifSx7ImNvZGUiOiJSUzAiLCJwYWlkVXBUbyI6IjIwMTgtMTAtMTQifSx7ImNvZGUiOiJXUyIsInBhaWRVcFRvIjoiMjAxOC0xMC0xNCJ9LHsiY29kZSI6IlJEIiwicGFpZFVwVG8iOiIyMDE4LTEwLTE0In0seyJjb2RlIjoiUkMiLCJwYWlkVXBUbyI6IjIwMTgtMTAtMTQifSx7ImNvZGUiOiJEQyIsInBhaWRVcFRvIjoiMjAxOC0xMC0xNCJ9LHsiY29kZSI6IkRCIiwicGFpZFVwVG8iOiIyMDE4LTEwLTE0In0seyJjb2RlIjoiUk0iLCJwYWlkVXBUbyI6IjIwMTgtMTAtMTQifSx7ImNvZGUiOiJETSIsInBhaWRVcFRvIjoiMjAxOC0xMC0xNCJ9LHsiY29kZSI6IkFDIiwicGFpZFVwVG8iOiIyMDE4LTEwLTE0In0seyJjb2RlIjoiRFBOIiwicGFpZFVwVG8iOiIyMDE4LTEwLTE0In0seyJjb2RlIjoiUFMiLCJwYWlkVXBUbyI6IjIwMTgtMTAtMTQifSx7ImNvZGUiOiJDTCIsInBhaWRVcFRvIjoiMjAxOC0xMC0xNCJ9LHsiY29kZSI6IlBDIiwicGFpZFVwVG8iOiIyMDE4LTEwLTE0In0seyJjb2RlIjoiUlNVIiwicGFpZFVwVG8iOiIyMDE4LTEwLTE0In1dLCJoYXNoIjoiNjk0NDAzMi8wIiwiZ3JhY2VQZXJpb2REYXlzIjowLCJhdXRvUHJvbG9uZ2F0ZWQiOmZhbHNlLCJpc0F1dG9Qcm9sb25nYXRlZCI6ZmFsc2V9-Gbb7jeR8JWOVxdUFaXfJzVU/O7c7xHQyaidCnhYLp7v32zdeXiHUU7vlrrm5y9ZX0lmQk3plCCsW+phrC9gGAPd6WDKhkal10qVNg0larCR2tQ3u8jfv1t2JAvWrMOJfFG9kKsJuw1P4TozZ/E7Qvj1cupf/rldhoOmaXMyABxNN1af1RV3bVhe4FFZe0p7xlIJF/ctZkFK62HYmh8V3AyhUNTzrvK2k+t/tlDJz2LnW7nYttBLHld8LabPlEEjpTHswhzlthzhVqALIgvF0uNbIJ5Uwpb7NqR4U/2ob0Z+FIcRpFUIAHEAw+RLGwkCge5DyZKfx+RoRJ/In4q/UpA==-MIIEPjCCAiagAwIBAgIBBTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTE1MTEwMjA4MjE0OFoXDTE4MTEwMTA4MjE0OFowETEPMA0GA1UEAwwGcHJvZDN5MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxcQkq+zdxlR2mmRYBPzGbUNdMN6OaXiXzxIWtMEkrJMO/5oUfQJbLLuMSMK0QHFmaI37WShyxZcfRCidwXjot4zmNBKnlyHodDij/78TmVqFl8nOeD5+07B8VEaIu7c3E1N+e1doC6wht4I4+IEmtsPAdoaj5WCQVQbrI8KeT8M9VcBIWX7fD0fhexfg3ZRt0xqwMcXGNp3DdJHiO0rCdU+Itv7EmtnSVq9jBG1usMSFvMowR25mju2JcPFp1+I4ZI+FqgR8gyG8oiNDyNEoAbsR3lOpI7grUYSvkB/xVy/VoklPCK2h0f0GJxFjnye8NT1PAywoyl7RmiAVRE/EKwIDAQABo4GZMIGWMAkGA1UdEwQCMAAwHQYDVR0OBBYEFGEpG9oZGcfLMGNBkY7SgHiMGgTcMEgGA1UdIwRBMD+AFKOetkhnQhI2Qb1t4Lm0oFKLl/GzoRykGjAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBggkA0myxg7KDeeEwEwYDVR0lBAwwCgYIKwYBBQUHAwEwCwYDVR0PBAQDAgWgMA0GCSqGSIb3DQEBCwUAA4ICAQC9WZuYgQedSuOc5TOUSrRigMw4/+wuC5EtZBfvdl4HT/8vzMW/oUlIP4YCvA0XKyBaCJ2iX+ZCDKoPfiYXiaSiH+HxAPV6J79vvouxKrWg2XV6ShFtPLP+0gPdGq3x9R3+kJbmAm8w+FOdlWqAfJrLvpzMGNeDU14YGXiZ9bVzmIQbwrBA+c/F4tlK/DV07dsNExihqFoibnqDiVNTGombaU2dDup2gwKdL81ua8EIcGNExHe82kjF4zwfadHk3bQVvbfdAwxcDy4xBjs3L4raPLU3yenSzr/OEur1+jfOxnQSmEcMXKXgrAQ9U55gwjcOFKrgOxEdek/Sk1VfOjvS+nuM4eyEruFMfaZHzoQiuw4IqgGc45ohFH0UUyjYcuFxxDSU9lMCv8qdHKm+wnPRb0l9l5vXsCBDuhAGYD6ss+Ga+aDY6f/qXZuUCEUOH3QUNbbCUlviSz6+GiRnt1kA9N2Qachl+2yBfaqUqr8h7Z2gsx5LcIf5kYNsqJ0GavXTVyWh7PYiKX4bs354ZQLUwwa/cG++2+wNWP+HtBhVxMRNTdVhSm38AknZlD+PTAsWGu9GyLmhti2EnVwGybSD2Dxmhxk3IPCkhKAK+pl0eWYGZWG3tJ9mZ7SowcXLWDFAk0lRJnKGFMTggrWjV8GYpw5bq23VmIqqDLgkNzuoog==
示例图
示例图

安装配置Node环境

(1) 安装nvm（Node Version Manager）

GitHup主页：https://github.com/coreybutler/nvm-windows
nvm-windows下载地址：https://github.com/coreybutler/nvm-windows
安装过程比较简单，安装完成后到安装目录（默认是C:\Users\GMY\AppData\Roaming\nvm），修改settings.txt文件如下（根据自己的安装目录稍作修改）：

1
2
3
4
5
6
root: C:\Users\GMY\AppData\Roaming\nvm 
path: C:\Program Files\nodejs 
arch: 64 
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

验证nvm是否安装成功，可以运行如下命令，并且查看环境变量中是否已经自动创建了NVM_HOME和NVM_SYSLINK

1
$ nvm version

(2) 安装node和npm

使用nvm安装node（V6.9.0），安装node的同时会绑定安装npm（Node Package Manager）

1
2
3
4
5
$ nvm install v6.9.0
$ nvm list
$ nvm use 6.9.0
$ node --version
$ npm --version

(3) 安装全局的npm

配置全局的npm安装包路径

1
$ npm config set prefix "C:\Users\GMY\AppData\Roaming\nvm"

然后安装全局的最新npm

1
2
$ npm install -i -g npm
$ npm --version

安装完成后需要配置环境变量NPM_HOME=C:\Users\GMY\AppData\Roaming\nvm\npm并添加%NPM_HOME%到path，如下图所示：

示例图
示例图

安装cnpm（淘宝的国内npm镜像）

因为国内的环境所以我们需要一个国内的镜像，不然后面通过npm安装相关的包会非常的慢并且可能安装不上

1
2
$ npm install -i -g cnpm
$ cnpm --version

配置并运行NiceFish项目（Angular2）

(1) 安装angular-cli脚手架

通过我们安装的cnpm安装angular-cli脚手架（这里需要注意的是如果使用原生的npm安装会有一切环境问题，比如需要安装python环境和visual studio环境等，所以建议使用cnpm安装）

1
2
3
4
$ npm uninstall -g angular-cli
$ npm uninstall -g @angular/cli
$ cnpm install -i -g @angular/cli
$ ng --version
示例图
示例图

(2) 克隆NiceFish项目到本地

因为NiceFish这个项目在开源中国的码云上，所以需要使用git来克隆项目。这里推荐一个取代windows下cmd的工具cmder（http://cmder.net/），可以去官网下载并安装，如果你安装了`cmder`，里面已经集成安装了`Git`，所以可以直接执行下面的命令。

如果你并不想使用cmder，而仍然青睐于cmd的话，那你就需要单独安装Git（https://git-for-windows.github.io/），安装完成后执行如下命令：

1
2
3
$ E:
$ cd WebstormProjects\
$ git clone https://git.oschina.net/mumu-osc/NiceFish.git

(3) 安装NiceFish项目的依赖包

我们已经克隆的项目在E:\WebstormProjects\NiceFish，接下来我们需要安装这个项目的依赖包

1
2
3
$ E:
$ cd WebstormProjects\NiceFish\
$ cnpm install

(4) 编译运行NiceFish项目

使用ng命令编译运行项目，这个编译过程会比较慢，大概需要1分多钟，耐心等待就好了

1
$ ng serve --prod --aot

如果你看到如下图所示，那么恭喜你已经完成了全部node配置并且成功运行了一个Angular2的项目。现在打开浏览器访问http://localhost:4200，就可以访问项目了，Enjoy！

示例图
示例图