使用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.****.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
工程开始启动,日志如***意红色部分打印了访问地址,我们现在复制打开该网页