第一步

安装全局的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. ubuntu安转QTcreator出现The default mkspec symlink is broken

    QT Creator安装:https://blog.csdn.net/arackethis/article/details/42326967 QT SDK安装:https://blog.csdn.ne ...

  2. 说说正则表达式的exec方法

    话说,关于正则表达式有一个梗,大意是: 假如你有一个问题,想用正则来解决,于是你就有了两个问题 这句话侧面反映了精通正则是一件不容易的事.比如我今天遇到的诡异事件. 情景回放 这两天练手写了一个爬用户 ...

  3. JavaScript -- Select

    -----053-Select.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  4. slf4j 作用及logback概述

    为什么要使用slf4j 现实场景: 我们自己的系统中使用了logback这个日志系统 我们的系统使用了A.jar,A.jar中使用的日志系统为log4j 我们的系统又使用了B.jar,B.jar中使用 ...

  5. Java配置分离之Spring远程配置

    访问我的博客 前言 集群应用的配置文件如果写在项目的 resources 目录下面,当遇到需要修改某一个配置值时,需要将集群的所有应用的配置信息进行修改,并且将机密的配置信息比如数据库账号密码如果不进 ...

  6. 复刻smartbits的国产网络测试工具minismb功能特点-如何加载、发送PCAP数据包

    复刻smartbits的网络性能测试工具minismb,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此以太网测试工具测试任何ip网络设备的端口吞吐率,带宽,并发 ...

  7. Mybatis插件使用-统计sql执行时间

    背景介绍:最近由于产品数据量较大,sql执行十分低效,正在做数据库优化,所以想在日志中看到每个sql执行的时间,以方便针对性的优化. 查找相关资料,了解到Mybatis有一款插件,是基于interce ...

  8. PHP函数array_merge

    今天因一个Bug重新审视了下array_merge()这个函数. 定义:array_merge — 合并一个或多个数组 规范:array array_merge(array $array1 [, ar ...

  9. UVa 12657 Boxes in a Line(数组模拟双链表)

    题目链接 /* 问题 将一排盒子经过一系列的操作后,计算并输出奇数位置上的盒子标号之和 解题思路 由于数据范围很大,直接数组模拟会超时,所以采用数组模拟的链表,left[i]和right[i]分别表示 ...

  10. C# ABP 配置连接数据库&创建表

    1. 配置连接数据库 配置连接数据库很简单,只需要打开Web项目,然后找到Web.config,配置如下: <connectionStrings> <add name="D ...