每天学习一点点,成功增加一大步

Angular笔记:用WebStorm进行开发

Angular zhanghui 1540℃

自己学习使用了 Angular JS 1 一段时间,由于初次接触 Angular JS 这种新前端框架,还有工作方面的影响,就搁置了一段时间。在最近的又重拾 Angular JS 1 并与新版 PKFrame 进行尝试性的实战演练。深入的到了 Angular JS 1 的独特优势,最终弄了一个简单的后台和一个简单的小游戏(game.pkcms.cn)。

而这周我们又开始了新的工作,要求使用 Angular JS 2 ,所以决定弄弄Angular 2。虽然微软的 VS Code 是一款不错的IDE,但我自从接触了 WebStorm,相信它同样也是进行JS和前端开发的不二之选的IDE工具,由于是Angular 2的新接触者,在网上看了一些仁兄的帖子,很有帮助,所以用 WebStorm 进行 Angular 2 的工程创建,还是挺方便的。

一、所需的装备

  • WebStorm
  • Nodejs
  • angular-cli

(1)Nodejs安装

如何安装本博主有发表这篇文章【nodeJS 应用服务器创建的示范】可以参阅。

(2)Nodejs配置

Nodejs安装完成之后,默认会将node.exe的路径,添加到系统的环境变量中,如果没有请手动添加。

1、配置 prefix 和 cache 目录

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

以上的路径设置只是个示范,不一定要放在 nodejs 的安装路径下,可以在其他盘符设置 prefix 和 cache 目录

2、配置环境变量

右击“计算机”—>”属性”—>”高级系统设置”—>”环境变量”

在”系统变量”中,设置 NODE_PATH,在系统变量里新建 NODE_PATH ,值为 nodejs 安装目录下的 node_modules 文件夹路径,好像不同版本的 nodejs 这个文件夹路径似乎有些不同,请按实际的路径来,而我的路径地址为:

C:\Program Files\nodejs\node_modules

然后通过 “npm config set prefix” 设置的值。可以,用下面命令查看

再在“用户变量”中修改 path,添加

C:\Program Files\nodejs\node_global\

这个值就是上一步中,通过 “npm config set prefix” 设置的值。

3、配置sass_binary

angular cli 是要依赖 node-sass 的,默认情况下,不会像其它包一样直接下载,而是要下载后进行编译的。在Windows下,首先要通过git下 win32-x64-51_binding.node,这步是要翻越中国的城墙,不然是不能正常下载。

首先要做的就是根据错误提示,可以通过官网手动下载相应的版本

https://github.com/sass/node-sass/releases/

将下载的 binding.node 放到指定目录,例如:

E:\node\win32-x64-51_binding.node

也可以通过命令配置阿里的镜像来配置路径

npm config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
npm config set sass_binary_path "C:\win32-x64-51_binding.node"

(3)安装工具包

1、全局安装阿里 cnpm

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

在项目中也可以通过镜像

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

2、全局安装typescript

npm install -g typescript typings

3、全局安装 angularjs-cli

npm install -g @angular/cli

二、创建工程

创建工程有两种方式,以下分别阐述一下这两种方式。

1、通过终端命令的方式

首先通过命令定位到你想要建立项目的根目录下,比如要想在“D”盘符在建立名为“projectName”文件夹,将项目建立在这个文件夹中,那么就通过命令定位有“D”盘符下,然后输入命令:

ng new projectName

使用这种方式你有可能会遇到等待安装完毕(时间可能会比较长 Installing packages for tooling via npm.),因为我已经遇到了,解决的方法是通过执行以下的命令便可解决。

npm install -g n --force

2、通过视图界面的方式

打开WebStorm新建一个Angualr CLI 工程

在创建的时候需要等待一段IDE部署的时间,这个时候也同样需要翻越那道墙,不然等待的时间会比较长,等待看到以下文字表明已经部署成功可以开始你的工作了

Project 'untitled' successfully created.
Done

三、测试工程

选择 package.json, 右键选择“Show npm Scripts”

或者用“Edit Configurations”,添加“npm”

通过菜单打开“Edit Configurations”

打开“Edit Configurations”后通过“+”添加“npm”

添加“npm”后侧相关设置

双击“start” 启动 Web Server,看到 “webpack: Compiled successfully.” 表明可以打开浏览器去浏览了

在浏览器输入 http://localhost:4200 ,若出现以下 ,表示 Angular 2 已经正常启动。

转载请注明:隨習筆記 » Angular笔记:用WebStorm进行开发