使用webStorm开发Angular JS2--记录从安装webstorm到第一个成功demo的经过(遇到的常见问题)

第一步:在webstorm官网上安装webStorm   https://www.jetbrains.com/webstorm/download/#section=windows

选择windows系统的安装 ,安装步骤基本跟着导引next ,结束之后,单击图标跳出的信息不用管。关闭这个窗口。再点击这个图标,出现了几个需要你接受或者next 的弹窗,根据需要点击后,最后的激活webstorm界面是这样的:

第一次,我选择了license server,但是出现了无法找到这个有效的地址,域名过期了。在尝试了很多网友分享的网址都是没有效果,激活失败;

第二次,我选择了Activation code即通过激活码激活,试过一个网站,在线的激活码生成,但是激活失败,被告知已经失效了,于是继续查找,最终在一个贴吧上找到了可以使用的激活码。激活之后就可以正常使用了。

后来找到一个博主,在长期更新激活码,在这里推一下,也方便之后自己的使用:

https://blog.csdn.net/insistlzh/article/details/80285901

第二步:

              安装Node.js (麻烦在配置上)  因为Agualar 的需要使用Node.js的npm工具包,npm里面有很多前端开发的工具。

                  在Node.js官网上,下载对应的文件

     在弹窗中不断的next,一般选择默认的安装路径就好,这里选择Add to PATH直接把系统变量配置好,之后不需要自己配置,确认安装后,进行安装。

安装完成后,在nodejs文件下新建两个文件node_cache,node_global ,前者存放的是下载包缓存,后者保存的是全局模块。

第三步:****   快捷键windows+R 输入cmd  运行node -v 和npm -v,输出以下的结果则是安装成功了,在第一次运行的时候,在我这里,发生了node -v可以运行,但是npm -v 无法运行,光标一直在闪,就是没有数据输出。在找了很多方法,如果是npm -v 报错的朋友 你们可以试一下删除node和node modules 等文件,然后再重新进行nodejs的安装。但是在我这里是没有报错,经历了几个小时的查找和重装nodejs,后来发现只需要找到C盘(默认安装)的user\Administrator下的npmrc删除了就好。运行成功。

第四步:配置prefix和cache目录

Cmd 执行以下两条命令

npm config set prefix "D:\ProgramFiles\nodejs\node_global\"

npm config set cache "D:\ProgramFiles\nodejs\node_cache"

第五步:  下载 配置node-sass,angularcli 是要依赖node-sass的

在Windows下,首先要通过git下载win32-x64-51_binding.node,下载地址:https://github.com/sass/node-sass/releases/    下载完成后放到nodejs的安装目录下面。    

                 Cmd命令行:

                 npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

                  set SASS_BINARY_PATH=D:\ProgramFiles\nodejs\win32-x64-51_binding.node

第六步:安装typescript  js的超集,适用于Angular的开发

               进入cmd 执行

               npm install -g typescript typings

第七步:安装angular-cli 是Angular的基础

             在这之前,先安装一下淘宝镜像,下载快一点

              npm config set registry  https://registry.npm.taobao.org

              cnpm install -g @angular/cli

       初步完成所有配置啦 然后进行测试

       在cmd运行ng -v,测试成功显示如下的结果

第八步:在webstorm中新建一个Project,选择Angular CLI,选择自己要建的Location位置,下面的两个路径都使用默认的就好。

在新建的工程目录结构有这些:

选中package.json 右键选中 show npm scripts

在出现的npm窗口,选择start,右键运行start

工程开始启动,日志如下,注意红色部分打印了访问地址,我们现在复制打开该网页

猜你喜欢

转载自blog.csdn.net/weixin_42060800/article/details/82881851