ng-cli搭建angular项目框架

原文地址

  https://www.jianshu.com/p/0a8f4b0f29b3

环境准备

  以下步骤都不需要事先创建文件夹,只是环境的准备过程,只有到需要搭建项目的时候才需要创建文件夹用来存放项目文件。

1、安装NodeJs

  NodeJs的安装步骤是很简单的,在网上下载一个一个nodeJs安装包,然后按照提示一步一步的安装。
  NodeJs安装好之后会连带着安装一个npm,nodeJs的安装流程很简单,按着步骤一步一步下来即可。
  安装完成之后在控制台上输入npm -v 以及 node -v若成功则会输出对应版本,并且已经将npm和node部署到了全局的环境变量。

  

2、安装angulr-cli

方式一:ng-cli原生指令

npm install -g @angular/cli

方式二:该指令同样可以完成功能,但是会有一些奇怪的问题,比如ng eject的指令就不存在

npm install -g angular-cli

3、查看angular-cli版本,检查是否安装成功

ng -v

  

搭建项目框架

4、新建项目

ng new Anuglar2Demo1 //如下图则是项目创建成功的样子

 

5、进入项目目录

cd Anuglar2Demo1

6、启动项目——执行ng serve命令

ng serve

7、访问项目

  访问http://localhost:4200/

总结

  以上的步骤都是我从网上各个博客中边差边写的,并且本地根据上述的步骤也实现了好几次的搭建简单的angular项目的框架。当然有时候也可能因为nodejs的版本或者ng-cli的版本问题导致安装的失败,这时候不要着急,可以尝试着将版本降低或者重新搭建一次环境。利用ng-cli搭建angular看起来高大上,但是要搭建一个简单基础的项目框架,根据我上面的操作基本能够实现,但是一个全面的更加优秀的框架还是需要不断的完善才可以的。

最后

  这个是我已经搭建好的angular项目框架,如果不想花时间去搭建的可以直接克隆我搭建好的就可以使用了。

  关于angular一些的实例应用中的angular-demo-base

  //项目克隆之后,需要执行以下命令才可以启动项目 npm install npm run start

参考网址

使用 angular-cli 创建 angular2 项目
使用webStrom创建angular2项目
使用cnpm搭建项目

 

posted @ 2018-06-17 23:26  前端路上的小兵  阅读(4744)  评论(0编辑  收藏  举报