angular-cli 安装遇到的问题

新入手angular安装以及环境配置跟初始化项目的时候碰到了各种问题,能蒙圈好长时间。
首先就是安装Node跟NPM,node直接在官网(https://nodejs.org)下载就行,我选择了最新版本

angular-cli 安装遇到的问题
最新的node安装完成后,包含了npm,不需要安装了 我们可以在cmd窗口下查看安装是否成功以及版本号,输入如下:

node -v
npm -v

angular-cli 安装遇到的问题
安装好node跟npm后,在安装angular-cli脚手架之前,我们需要安装一个打包工具,我一般都用webpack这个打包工具,有的依赖包需要*才能下载,所以又需要安装一个跟NPM一样功能的cnpm(淘宝镜像)管理工具。
cnpm是国内淘宝的镜像,它的的服务器在中国,它会每隔15分钟跟NPM镜像同步一次,所以cnpm更稳定在国内还是比较受欢迎的。

cnpm地址:HTTPs://npm.taobao.org/

安装cnpm

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

更改npm源设置成淘宝的源

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

接下来我们安装webpack环境

cnpm install webpack -g

-g 全局安装,是因为可能很多地方都要用到

安装打包工具webpack-cli:

cnpm install webpack-cli -g

前面弄了一大堆的配置环境,搞的我都有点头大,弄了一上午才基本搞懂,接下来正式开始搭建Angular-cli脚手架
1、首选打开cmd命令窗口,输入

cnpm install -g @angular/cli

angular-cli 安装遇到的问题
angular-cli 安装遇到的问题
安装成功

创建一个新的项目(my-dream-app),在指定的目录下,输入

ng new my-dream-app

接下来就是让它跑起来,先进入项目根目录

cd my-dream-app

再输入

ng serve

my-dream-app这个项目就跑起来了

总结如下:

cnpm install -g @angular/cli
ng new my-dream-app
cd my-dream-app
ng serve