第一步

安装全局的angular-cli, npm install -g @angular/cli

或者 
cnpm install -g @angular/cli@v1.0.0-rc.2 – 国内淘宝源(cnpm的安装自行搜索) 
或者 
yarn add global @angular/cli

第二步

查看各插件是否已经安装,ng -v会出来一堆东西,如第一个图git命令所示!

第三步

生成项目 代码为:ng new 项目名称


angular-cli可以初始化ng2或者ng4的项目,我这里说2+;

脚手架的命令很多,我这里只列出最常用的;

  • 新建东东
范围 命令 作用
new ng new new_project 初始化新项目
Component ng g component my-new-component 新建一个组件
Directive ng g directive my-new-directive 新建一个指令
Pipe ng g pipe my-new-pipe 新建一个管道
Service ng g service my-new-service 新建一个服务
Class ng g class my-new-class 新建一个类
Interface ng g interface my-new-interface 新建一个接口
Enum ng g enum my-new-enum 新建一个枚举
Module ng g module my-module 新建一个模块
  • 测试及检测
范围 命令 作用
e2e ng e2e 跑自动化测试-自己写测试测试用例
test ng test 跑单元测试 – 自己写
lint ng lint 调用tslint跑整个项目,可以收获一堆警告和错误,–force –fix –format可以帮助格式和修复部分问题

第四步

现在已经创建完成了,cd进入项目,会看到一些这样的东西,说明已经创建完成了,接下来就是执行项目就可以了,跟vue2.0一样,此时执行用到的代码为:ng serve --open(和vue的npm run dev效果是一样,自动监听修改内容),这一点也是不同于angularjs(官方称1.x为angularjs,过了2.0就直接称为angular)

最后执行完之后就会弹出来一个页面,就是要生成的页面了

其他:

  • 打包

ng build: 开发模式打包,调用的环境文件是/src/environments/environments.ts
ng build --prod: 以前调用aot打包还需要带上--aot,从beta31开始,--prod模式下自动调用aot打包, 
调用的环境文件是/src/environments/environments.prod.ts


  • 弹出配置文件(还原真实的配置文件)

ng eject : 这个东西的配置很多,可以弹出各种各样的源配置和文件 
我们看到的ng开头的命令都是二重封装的。。。有时候我们想要改源文件或者看到原始配置是怎么样的这货就用到了

  • 这个脚手架支持sass和less,手动改下.angular-cli.json就可以了,或者执行命令改下支持;
  • 当然可以配置接口反向代理,推荐还是把不同接口的url写在不同的environment里面,用nginx做反向代理! 
    ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持的,现在不知道支不支持,写法如下
{
"/": {
"target": "http://localhost:3000",
"secure": false
}
}

好了,那么基本的搭建已经完成了,去试试吧!

使用angular-cli脚手架快速搭建项目的更多相关文章

  1. httprunner(3)用脚手架快速搭建项目

    前言 如何快速搭建一个httprunner项目呢?我们可以使用脚手架,脚手架就是自动地创建一些目录,形成一个项目的架构,不需要我们再手动的去创建 查看创建新项目的命令 先来查看一下帮助命令 httpr ...

  2. vue-cli脚手架快速搭建项目

    前言 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. 准备工作 在搭建一个vue项目之前,需要先安装好node.js和cnpm. 虽然np ...

  3. 脚手架快速搭建springMVC框架项目

    apid-framework脚手架快速搭建springMVC框架项目   rapid-framework介绍:   一个类似ruby on rails的java web快速开发脚手架,本着不重复发明轮 ...

  4. 迈向angularjs2系列(8):angular cli和angular2种子项目

    文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...

  5. 基于Vue-cli 快速搭建项目

    Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架.下面我说一下vue-cli的使用方法. 一.准备工作 在使用vue-cli时,首先需要安装nodejs,npm,其次需全局安装v ...

  6. vue-cli webpack 快速搭建项目

    一.安装vue npm install vue -g 二.用vue-cli快速搭建项目 //全局安装vue-cli npm install install -g vue-cli //创建一个基于web ...

  7. (转载) android快速搭建项目积累

    android快速搭建项目积累 2016-04-05 20:07 519人阅读 评论(0) 收藏 举报  分类: android优化(8)   Rx技术(5)  版权声明:本文为博主原创文章,未经博主 ...

  8. 使用vue-cli(vue脚手架)快速搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的 ...

  9. vue2.x利用脚手架快速构建项目并引入bootstrap、jquery

    要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. ...

随机推荐

  1. NIO基础之同步、异步、阻塞、非阻塞

    这里区分几个概念,也是常见但是容易混淆的概念,就是标题中的同步.异步.阻塞.非阻塞. 一.同步与异步 同步与异步,关心的是消息通信的机制.也就是调用者和被调用者之间,消息是如何进行通知的.如果是调用者 ...

  2. 深入浅出SQL Server中的死锁(实战篇)

    简介 死锁的本质是一种僵持状态,是多个主体对于资源的争用而导致的.理解死锁首先需要对死锁所涉及的相关观念有一个理解. 一些基础知识 要理解SQL Server中的死锁,更好的方式是通过类比从更大的面理 ...

  3. 微信 JS-SDK 签名验证

    doc: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html demo:http://demo.open.weix ...

  4. Referrer Policy 介绍

    发布于 署名 4.0 国际 (CC BY 4.0) 原文链接:https://caixw.io/posts/2017/referrer-policy.html 当用户在浏览器上点击一个链接时,会产生一 ...

  5. 06 - JavaSE之常用类

    String类 String 类是不可变的字符序列,String 字符串一旦分配好就不能改变其内容和长度了.(如果使用 s1+=s2; 并不是在s1的后面开辟空间将s2拷贝其内,而是另外开辟一个空间, ...

  6. 31-hadoop-hbase-mapreduce操作hbase

    有一些大的文件,需要存入HBase中,其思想是先把文件传到HDFS上,利用map阶段读取<key,value>对,可在reduce把这些键值对上传到HBase中. HbaseMapper: ...

  7. MySQL slave状态之Seconds_Behind_Master【转】

    在MySQL的主从环境中,我们可以通过在slave上执行show slave status来查看slave的一些状态信息,其中有一个比较重要的参数Seconds_Behind_Master.那么你是否 ...

  8. nginx 跳转系列

    1.nginx强制跳转https配置,通过http状态吗实现,http状态吗地址: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/3 ...

  9. 并发编程——详解 AQS CLH 锁

    从 acquire 方法开始 -- 获取 为什么 AQS 需要一个虚拟 head 节点 reelase 方法如何释放锁 总结 前言 AQS 是 JUC 中的核心,其中封装了资源的获取和释放,在我们之前 ...

  10. AngularJS学习笔记(四)内置指令

    说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素 ...