AngularJS2——使用Angular Cli 快速搭建工程

最近小小的研究了一下AngularJS2,今天介绍一下环境的搭建

软件安装:Node.JS5.0以上;NPM3.0以上(安装Node.js的时候自动就安装了npm);TypeScript(可以通过VS或者命令行两种方式进行安装)

第一步:
安装npm,由于npm官网镜像访问太慢,我们使用淘宝的npm镜像,在node命令窗口

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

第二步
安装angular-cli,尝试过很多方法,终于找到一个靠谱的

1.设置淘宝镜像,在.npmrc文件(C:User-你的电脑名文件夹下)中加入下面一句:

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

2.安装angular-cli

npm install -g angular-cli

3.如果之前安装失败了一定要卸载干净

npm uninstall -g angular-cli
npm cache clean

一定要把ng和ng.cmd也删除

AngularJS2——使用Angular Cli 快速搭建工程_第1张图片

4.测试
输入 ng -v,有版本信息说明安装成功

5.建立AngularJS2的项目
在桌面上建立一个文件夹,命令行进入这个文件夹的位置,然后输入:

ng new 名字

AngularJS2——使用Angular Cli 快速搭建工程_第2张图片

这个过程可能会等一会儿(有可能很长时间,但是一定要有耐心),一直到出现下图最后一行的提示,说明整个项目的框架搭建完成

AngularJS2——使用Angular Cli 快速搭建工程_第3张图片

我们用webstrom打开项目,就可以看到框架包含很多内容,这样也是使用angularjs cli的好处,一句代码,整个项目所有的环境,都帮你建立好了

AngularJS2——使用Angular Cli 快速搭建工程_第4张图片

6.启动项目

AngularJS2——使用Angular Cli 快速搭建工程_第5张图片

AngularJS2——使用Angular Cli 快速搭建工程_第6张图片

7.不要关闭命令窗口,打开网页,输入:http://localhost:4200/

成功~

AngularJS2——使用Angular Cli 快速搭建工程_第7张图片

总结:

我也试过没有使用AngularJS Cli搭建项目,就需要自己去写必要的配置文件,有兴趣的同学可以看看下边这个网页上的搭建过程:
AngularJS2 环境配置

P.S.神器推荐:everything,文件搜索利器,秒杀微软的搜索功能

你可能感兴趣的:(-----,【前台框架】)