3、使用angular cli初始化一个新项目
新项目搭建
ng new命令新建项目
首先到工作目录底下,然后使用ng new命令初始化一个新项目:
ng new newProject // 后面跟的是项目名称
命令执行结果如下:
这个命令会自动帮我们生成所需要的一些基本文件,注意上图,在create完成一些命令之后,它还会自动调用npm install命令,使用npm把对应的依赖包下载下来。这个时候请使用ctrl+C,进行中断,因为我们不需要使用使用npm自动安装,我们会稍后自己使用cnpm安装对应的依赖包(npm速度慢,而且有被墙的风险)。
命令执行完成之后,生成的项目目录结构如下:
由图可知,这个命令会生成项目对应的目录结构,以及一些所需要的文件。
从图中我们可以看到package.json这样一个文件,对于每一个nodejs项目来说,它都必须有一个package.json配置文件。
这个文件中定义了有项目的名称,version,license之类的信息。最重要的是,在这个文件中声明了项目所需要依赖的所有的包dependencies、devDependencies。
在我们使用npm install命令安装依赖包时,node会自动读取package.json文件,然后获取到所有的依赖包列表并一一安装。
文件列表中还有一个.angular-cli.json文件,这个文件是angular/cli会自动去读取的。
cnpm install 命令安装依赖包
在项目新建完成之后,我们需要安装所需要的依赖包,进入到项目目录下,使用cnpm install
命令,这样node会自动去读取项目中的package.json文件,然后根据文件中配置的这些依赖包,然后一一会进行下载,如图所示:
图中可以看到几个警告,第一个说的是karma-cli@\^1.0.1这个依赖包用v8.2.1的版本不适配,需要低一些的版本。然后后面的是karma@1.7.1>ckokidar@1.7.0>fsevents@\^1.0.0这些歌依赖包需要darwin操作系统,windows的操作系统无法匹配的问题。
所以好像前面有谁说最新的node版本在angular/cli会有点问题,不知道说的是不是这个,所以这个时期,还是先安装6.x的版本好了。
安装完了之后,我们可以看到项目目录多出了一个node_modules目录(如下图),node默认是把所有的依赖包都安装到了这个文件夹下,所以如果依赖包安装过程中发生了什么错误,或者我新添加了什么依赖包需要重新安装依赖包的情况下,我们需要先把项目底下的node_modules文件夹删除,然后重新运行cnpm install命令。
ng serve 开启服务
项目新建完成,依赖包下载完成。之后就可以跑起项目了,我们需要使用ng serve
的命令开启一个轻量级的开发状态的httpserver。
我们在做前端开发的时候,不要启动后台,只要开启一个前端就好了。
从上面图中,我们可以看到只需要打开浏览器访问http://localhost:4200即可。
最后,在浏览器中看到上图所示的界面,就相当于我们已经用angular/cli建立好了一个新项目。
在Chrome浏览器的调试工具中发现网络请求里面,中vendor.bundle***啥的,某个文件特别大,俺么我们就可以重启服务,使用production模式,即使用命令ng serve --prod
,这样就会减小文件大小。
但是使用这个命令,我们会发现下面的错误:
这个错误发生的原因其实是由于angular/cli的最新版本有bug吧,所以我们不要用最新的版本,将下图中angular/cli的对应版本改为1.2.6(这个版本是没有问题的)。随后需要扫除node_modules文件夹,然后重新运行cnpm install
命令。
在依赖包重新安装之后,我们再设置ng serve --prod
,就会有效减小请求中文件的大小:
至此,使用@angular/cli初始化一个新项目已经完成。
工具搭建的新项目剖析
新搭建的项目中,有自动生成的应用根页面模板,应用根组件,应用根模块:
css修改使用scss
将所有的css后缀文件,修改为scss,然后其余各个文件中对原来css的引用也都改成scss。这样项目就会使用scss进行编译。
添加依赖包
我们需要使用其他依赖包的,就直接到package.json中添加对应的依赖包,然后通过cnpm install
安装即可。比我,我们要引用bootstrap还有font-awesome依赖包的时候,就需要在package.json配置文件的dependencies节点下添加上对应的依赖信息:"bootstrap": "^3.3.7","font-awesome": "^4.7.0"
随后在styles.scss文件中,使用import语句,@import "~bootstrap/dist/css/bootstrap.min.css";@import "~font-awesome/css/font-awesome.min.css";
就能将bootstrap和font-swesome中的css样式导入过来了。路劲中的~表示,路径查找时,不要查询项目路径,直接到node_modules目录下面去找。因为bootstrap是我们使用cnpm install的依赖包,所以当然在node_modules文件夹下。
新建组件Component
在终端中使用组件创建命令
> ng generate c UserList // c表示component,命令中的generate可以简写为g,组件名称使用驼峰命名
这样写,会自动生成目录结构,并且生成组件:
- 会自动在src目录下生成一个user-list目录,目录下有UserList组件对应的html,scss,ts文件
- user-list.component.html
- user-list.component.scss
- user-list.component.spec.ts
- user-list.component.ts
- 同时,会更新src/app/app.module.ts根模块中的信息(将这个新组件import到根模块中)。
随后使用,是在user-list.component.ts文件的@Component()声明中,找到selector节点,节点内容为selector: 'app-user-list
(app这个前缀是通过修改.angular-cli.json配置文件中的"prefix": "app"
项可以修改的),然后就可以直接在项目的根html模板中使用<app-user-list></app-user-list>
标签即可,这个标签到底包含哪些内容,就需要看组件自身的html文件user-list.component.html中写了哪些内容了。
3、使用angular cli初始化一个新项目相关推荐
- 新公司新入手的一个新项目的心路历程
刚来公司报道不久,接到我们老大派来的一个新项目,接到活的心情是矛盾的,既兴奋又紧张,兴奋的是来公司一段时间,没有活干,闲着是让我感觉最难受的一件事情,宁愿忙成狗,也不愿意闲得慌,终于有活干了,想着能让 ...
- php项目打开快捷方式,克隆一个新项目的快捷方式_PHP教程
有没想过最土的项目如何快速复制出一个来,然后改改就成新的团购项目了? 或者说编辑一个老项目的时候想把他另存为一个新项目而不是保存, 看下图 红色部分 具体开发代码(非细节),如下 修改模板,加入按钮 ...
- php项目打开快捷方式,PHP_克隆一个新项目的快捷方式,有没想过最土的项目如何快速 - phpStudy...
克隆一个新项目的快捷方式 有没想过最土的项目如何快速复制出一个来,然后改改就成新的团购项目了? 或者说编辑一个老项目的时候想把他另存为一个新项目而不是保存, 看下图 红色部分 具体开发代码(非细节), ...
- IDEA中导入一个新项目,出现了Cannot resolve symbol 'String'
问题描述:使用IDEA导入一个新项目,出现了String字体样式变成红色,并且提示,如下图所示: 解决办法:本人IDEA版本是IntelliJ IDEA 2018.1.5 (Ultimate Edit ...
- 运营思路之如何做好一个新项目
运营同学在一家公司里面做产品运营时,无外乎两种运营,一种是已有业务的运营工作,另外一种是全新业务,需要开拓的新的业务的运营.我在多年的运营过程中,新项目也做过很多,对比老项目,发现面对一个全新的项目, ...
- Vue之初始化一个vue项目
Vue之初始化一个vue项目 以防忘记需要重新查资料创建,在这里简略的记一记 1.node.js官网下载安装node.js https://nodejs.org/zh-cn/ 下载好之后cmd运行一下 ...
- Extjs6 --- 学习笔记(1)创建一个新项目
原公司使用的前端框架是Extjs,于是系统学习了Extjs的4和6.旧东家的项目主要为后台管理系统,因此对前端界面UI的要求并不高,侧重于数据的展示与处理 ,刚开始使用的是Extjs4,后升级成6. ...
- vue react angular 分别如何创建一个新项目
前提,这三个框架都需要依赖node.js 环境,并且node.js 包含npm环境 Vue: (vue-cli 3之前的版本) 1. 全局安装vue-cli 和 webpack npm install ...
- 初始化一个vue项目的流程
为什么80%的码农都做不了架构师?>>> 一.安装 nodejs 建议安装 v 7.9.0 本人使用的此版本比较好 二.安装 安装vue.创建vue项目 # 全局安装 vue- ...
最新文章
- mysql 关键字的优先级_mySQL之关键字的执行优先级讲解
- 史上最全Java多线程面试题及答案
- Linux学习:shell命令(文件权限、用户、用户组)
- 使用halcon将一个圆上的点拟合成圆形并且求出圆心
- Linux命令三剑客:grep、sed、awk总结
- python多久可以精通_学Python需要多久能学会?精通Python需要多长时间?
- excite-punastranvirtual.lab振动噪声仿真
- CSS动画效果构成分析
- html5在线聊天模板,h5聊天室模板|仿微信聊天室html5
- 微信 8.0 「裂开」「炸弹」的特效代码
- graphpad数据小数点_Image J和Graphpad如何对Western Blot条带灰度分析【干货】 | 每日生物评论...
- 400企业智能服务器,全球领先的企业级服务器、存储、融合系统及解决方案-H3C与HPE...
- 用户分类以及用户活跃度的衡量方法
- MIMO技术杂谈(一):鱼与熊掌能否兼得?--浅谈分集与复用的权衡
- html5打开新标签,[HTML5] 新标签解释及用法
- 求平面两圆公切线 切点坐标
- 小暑调养宝宝身体的五个方法
- 在MAC环境下玩转树莓派
- 程序员学人工智能,为什么必须要懂数学建模?
- 基于yolov5与改进VGGNet的车辆多标签实时识别算法
热门文章
- 数据库之《会员管理系统》
- 参加kaggle竞赛是怎样一种体验?
- C# Revit二次开发基础/核心编程--- Application\Document\Transaction
- Ubuntu下视频播放加速软件SMPlyer
- 关于我们 - 飞客旅行网 - 最大的中文酒店常客,航空常客,信用卡讨论网站!...
- 家庭理财期末考试试卷计算机,计算机科学与技术 家庭理财管理信息系统本科学位论文.doc...
- 高端电动汽车制造商蔚来使用Panasas ActiveStor存储加速产品设计和开发
- 1088 三人行 (20 分)(求问)
- K-means聚类算法代码
- Qt编写地图综合应用57-跨平台(win、linux、mac、uos、kylin等)