解读angular2官方文档的“快速上手“章节的开发环境,进行配置启动项目(图文)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dengzeyuan/article/details/76907333

因为在配置ng2的环境的时候,不想把node安装在默认路径C盘下,所以在安装完node和npm之后,在安装angular-cli的时候会出现偶尔安装不成功,和安装cnpm之后再命令行里输入cnpm install -g @angular/cli出现命令名称无法被识别的错误情况。导致按照官网的步骤也不能启动成功项目。为了避免node安装在D盘(或其他自定义路径下)之后安装@angular/cli和cnpm出现问题,下面步骤作为参考。

一、

搜索node下载,进入node下载地址(可以自行搜索下载地址)

根据自己系统选择对应下载文件,(我电脑是64位win8系统,我选择的是.msi文件64-bit)

然后打开下载下来的文件,按照提示一步步安装,默认是安装在C盘下,但是我选择安装在了 D:\nodejs 路径下

安装完node之后,可以看到在安装目录下生成一堆文件,node安装好后npm也被一起安装了,

按住win键+R键打开运行窗口,输入cmd按回车键打开命令框可以用node -v  和npm -v来检查自己安装的版本(按照官方的说法要越新版本的越好)

二、

配置环境变量

我的电脑-属性-高级系统设置-环境变量-新建
变量名:NODE_PATH
变量值:D:\nodejs\node_modules

(因为我安装在了D盘的nodejs路径下所以路径为D:\nodejs\node_modules)



三、

修改npm的镜像为淘宝镜像

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

也可以在安装node的路径下找到npmrc文件

(我的在D:\nodejs\node_modules\npm下的npmrc文件)

打开之后添加   registry https://registry.npm.taobao.org 到文件中


//顺便提一下

如果不愿意修改npm的镜像就安装cnpm

npm install -g cnpm

cnpm -v (查看版本)

可以用cnpm来进行安装@angular/cli

(cnpm也是淘宝的镜像 ,如果想用cnpm的话,后面安装只需要把npm install 都改为cnpm install )


四、

安装@angular/cli

npm install -g @angular/cli

安装完之后

ng -v (每次安装完之后都查看一下版本,既可以验证是否成功安装,也可以知道自己安装的版本),成功之后如下所示


五、

到此为止ng2所需要的启动环境已经安装好,就开始创建项目。

切换到要创建项目的目录下,(如上图所示,我创建新项目的路径为D:\tools\angular2-quanweizhinan)

创建新项目(接下来就可以按照官网步骤来进行)

ng new my-app

创建成功可以看到my-app这个文件

cd my-app

ng serve --open

(如果不出意外项目到此步骤已经成功打开)

六、

进入文件找到package.json打开,添加--open --prod --aot

--open可以帮你自动打开浏览器 --prod --aot 可以压缩文件打开速度变快


如果按照上图配置好之后用命令

npm start

就可以实现压缩文件,打开浏览器

可看到下图压缩之后和没有压缩的对比,很明显就可以看出来,添加 --prod --aot之后的文件size都比原来小了很多




顺便提一下package.json里面的其他属性如下图所示



猜你喜欢

转载自blog.csdn.net/dengzeyuan/article/details/76907333
今日推荐