环境准备:

WebStorm开发工具  https://pan.baidu.com/s/1o8maQLG  提取密码(加群获取599606903)

nodejs  https://nodejs.org/en/download/

angular-cli

window

1.WebStorm安装

2.nodejs安装

(1)下载Windows版的Nodejs,进行按照提示安装即可

如果正常显示版本号,即安装成功。

(2)nodejs配置

Nodejs安装完成之后,默认会将node.exe的路径,添加到系统的环境变量中,如果没有请手动添加。除此之外还要进行其他的配置

1、配置prefix和cache目录

d:\node

npm config set prefix "d:\node\node_global"

npm config set cache "d:\node\node_cache"

2、配置环境变量

计算机->属性->高级系统设置->环境变量

在系统变量中设置node_path

新建 变量名  NODE_PATH   变量值 D:\node\node_global\node_modules

这个值就是上一步中,通过 “npm config set prefix” 设置的值。可以,用下面命令查看

npm config get prefix

在用户变量修改path

path  D:\node\node_global\

3、配置sass_binary

angular cli 是要依赖node-sass的,默认情况下,不会像其它包一样直接下载,而是要下载后进行编译的。在Windows下,首先要通过git下载win32-x64-51_binding.node,但是不知道是被墙还是什么原因,下不下来,就会导致后面的编译出错,以及提示找不到python和Visual Studio的问题,手动下载相应的版本https://github.com/sass/node-sass/releases/

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

D:\node\darwin-x64-11_binding.node

配置路径:用过命令配置

npm config set sass_binary_site “https://npm.taobao.org/mirrors/node-sass/” //使用阿里的镜像

npm config set sass_binary_path “D:\node\darwin-x64-11_binding.node”

(3)安装工具包

1、全局安装阿里cnpm

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

2、全局安装typescript

npm install -g typescript typings

3、全局安装angular-cli

npm install -g @angular/cli

创建工程

1、打开webStorm新建angular cli工程

运行:

用WebStorm进行Angularjs 2的开发的更多相关文章

  1. AngularJS最理想开发工具WebStorm

    http://blog.fens.me/angularjs-webstorm-ide/ Angularjs插件下载地址:http://plugins.jetbrains.com/plugin/6971 ...

  2. 黄聪:AngularJS最理想开发工具WebStorm

    Aug 29, 2013 Tags: angularangular.jsangularjswebstorm Comments: 23 Comments AngularJS最理想开发工具WebStorm ...

  3. 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

    目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...

  4. 20个免费的 AngularJS 资源和开发教程

    曾经,jQuery 无疑是最受欢迎的开源的 JavaScript 库,如今它有了很多的竞争对手,像 AngularJS.React.KnockoutJS 等等.在这里,我想重点关注一下 Angular ...

  5. linux-mint下搭建android,angularjs,rails,html5开发环境 - qijie29896的个人空间 - 开源中国社区

    linux-mint下搭建android,angularjs,rails,html5开发环境 - qijie29896的个人空间 - 开源中国社区 http://blog.csdn.net/orzor ...

  6. Cordova+Angularjs+Ionic 混合开发入门讲解

    作为一名学习Android开发的学生,对于移动开发的发展趋势颇为关注,大家都知道,现在原生的移动开发在企业上基本很少使用了,大部分企业为了降低成本,选择了webapp,hybrid(混合开发)这两种模 ...

  7. AngularJS + CoffeeScript 前端开发环境配置详解

    AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了.虽然AngularJS的 ...

  8. angularJS实用的开发技巧

    一.开端 真的是忙完这一阵子就可以忙下一阵子了啊... 最近在做一个angularJS+Ionic的移动端项目...记录一些技巧,方便自己以后查阅,也方便需要的人可以看一看...^_^ 二.基础原则了 ...

  9. [整理]AngularJS移动端开发遇到的问题

    最近在开发一个移动WebAPP的小项目,因为之前一直使用AngularJS, 对于这个项目,废话不多说,拿过来就用上了. 开发过程是一路通畅和舒服的,但是,却忽略了一个非常重要的问题,移动2G环境下的 ...

随机推荐

  1. 鼠标经过事件(onmouseover)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 设计模式(八)Proxy Parttern 代理模式

    核心作用: 通过代理,控制对对象的访问 可以详细控制某个对象的方法,在调用这个方法做前置处理,调用这个方法后做后置处理(AOP的微观实现) AOP(Aspect Oriented Programmin ...

  3. 大数据新手之路二:安装Flume

    Ubuntu16.04+Flume1.8.0 1.下载apache-flume-1.8.0-bin.tar.gz http://flume.apache.org/download.html 2.解压到 ...

  4. jGrid + echart 后台管理

    用来初始化表的大小: $(select_dom).jqGrid( 'setGridWidth', parent_column.width() ); 表的大小随着页面的宽度变化: $(window).o ...

  5. 有效利用1 on 1

    2019-01-08 16:32:13 感觉1 on 1是浪费时间? 感觉1 on 1时没啥好说? 感觉老板总是不想1 on 1? 怎样才能 升职加薪? 一切都从有效的1 on 1开始!! 什么是1 ...

  6. Nginx的安装和使用(Linux)

    关于什么是Nginx,Nginx的优势和使用范围这里就不多说了.其实它就是一个web服务器.这篇文章主要是说Nginx的安装和使用. 安装方式有yum安装和源码安装,这里主要讲源码安装 1.安装依赖, ...

  7. spring容器bean的作用域 & spring容器是否是单例的一些问题

    Spring容器中Bean的作用域 当通过Spring容器创建一个Bean实例时,不仅可以完成Bean实例的实例化,还可以为Bean指定特定的作用域.Spring支持如下5种作用域: singleto ...

  8. You Don't Know JS: this & Object Prototypes( 第4章 Mixing "Class" Objects)

    本章移到“Object oriented programming”和"classes". 看‘class orientation‘ 的设计模式: instantiation, in ...

  9. 11月27日 招聘网第七部分,.gitignore的用法。

    回想Rails --Active Record Query Interface--Scopes的基本用法: 1.Passing in arguments.例子:scope  :name , -> ...

  10. addEventListener调用带参数函数

    当传递参数值时,使用"匿名函数"调用带参数的函数: <body> <button id="btn">click me</butto ...