码迷,mamicode.com
首页 > 其他好文 > 详细

ng-cli搭建angular项目框架

时间:2018-06-17 23:50:38      阅读:583      评论:0      收藏:0      [点我收藏+]

标签:控制台   图片   使用   基础   新建   执行   image   webstrom   实现   

环境准备

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

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

原文地址

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

参考网址

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

 

ng-cli搭建angular项目框架

标签:控制台   图片   使用   基础   新建   执行   image   webstrom   实现   

原文地址:https://www.cnblogs.com/shcrk/p/9194031.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!