Angular cli的使用方法是什么,如何掌握基本操作
Admin 2022-05-21 群英技术资讯 977 次浏览
这篇文章主要讲解了“Angular cli的使用方法是什么,如何掌握基本操作”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Angular cli的使用方法是什么,如何掌握基本操作”吧!
它是一个命令行界面工具,可用于初始化、开发、构建和维护 Angular 应用。
无npm先去下载nodejs
https://nodejs.org/en/download/
npm install -g @angular/cli
卸载的话也需要带上-g
npm uninstall -g @angular/cli
new|n指n是new的缩写,效果相同,下同。
ng new my-project
它会创建一个angular基础项目并且下载依赖运行项目,默认端口是4200。
可能需要用到的自定义内容
用法形如:
ng new my-project --xxx=x
以下不特殊注明默认值均为false
| 参数 | 意义 |
|---|---|
| `--force=true | false` |
| `--routing=true | false` |
| `--skipInstall=true | false` |
| `--skipTests=true | false` |
| `--force=true | false` |
| `--style=css | scss |
| `--packageManager=npm | yarn |
--prefix=prefix |
指定选择器的前缀(组件、指令),如传入--prefix=dep则组件的selector会成为dep-xxx, |
呀,创建的时候没有自定义,怎么补救呢? 直接在
angular.json中改~
新建一个基础文件,里面有预设的代码片段。如ng generate service demo,则会在当前文件夹新建一个demo.service.ts。
| 命令 | 作用 | 简写 |
|---|---|---|
| ng generate module xx | 新建模块 | ng g m xx |
| ng generate component xx | 新建组件 | ng g c xx |
| ng generate directive xx | 新建指令 | ng g d xx |
| ng generate service xx | 新建服务 | ng g s xx |
| ng generate pipe xx | 新建管道 | ng g p xx |
还有个更简单的方法:
vscode 中下载Angular Files插件,搜索alexiv.vscode-angular2-files即可找到。想在哪里创建点哪里。用起来爽歪歪。后面会写一个vscode开发angular好用的插件~
| 配置 | 意义 |
|---|---|
--host=xx |
设置应用的主机地址,别人可以根据这个地址访问你启动的应用。xx可以是你的ip或者0.0.0.0 |
--open=true|false |
true则在启动项目后自动打开页面,简写: ng server -o |
--port |
设置启动的端口号,避免启动多个项目占用同一个端口启动不起来 |
--proxyConfig=xx |
设置代理文件 |
--watch=true|false |
是否在代码更改时自动重新构建刷新页面,默认true |
--aot=true|false |
是否以预编译模式启动项目,默认为false。 缺点:项目运行时间增长。 优点:有时开发时没问题,打包上线之后出现问题可以在本地开启它来调试错误。 |
| 配置 | 意义 |
|---|---|
--baseHref=xx |
index.html访问其他静态资源文件的相对路径。也可以在index.html的<base href="xx">中配置,还可以在.angular.json中的baseHref配置。 |
--aot=true|false |
是否以预编译模式启动项目, 默认false,一般在angular.json中配置 |
--optimization=true|false |
是否启用构建输出的优化。 |
--configuration=xx |
指定打包环境的配置 |
--prod=true|false |
--configuration=production的简写。true则以生产环境的方式打包,进行摇树优化等操作。 |
当我需要打成不同的环境包时,可以使用以下方法:
在angular.json中做了如下配置,:
{
projects: {
project-name: {
architect: {
build: {
configurations: {
production: {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
...
},
qa: {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
],
...
},
sit: {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.sit.ts"
}
],
...
}
},
}
}
}
}
}之后可以进行不同的环境打包:
ng build --c=qang build --c=sitng build --c=production--c 是 --configuration的缩写
angular半年更新一个大版本,及时更新版本是非常重要的事情,如果落后高于1个版本以上,后续可能升级会很麻烦(别问我怎么知道,再问跳楼)。
从一个主版本升级到另外一个主版本,升级之前最好看下官方的升级指南
ng update @angular/cli@^<major_version> @angular/core@^<major_version>
ng update
ng update --all
Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=2.7.2 <2.8", would install "2.5.3") Incompatible peer dependencies found. See above.
强制更新办法:
ng update --all --force
如何修改update默认下载工具为yarn
ng config --global cli.packageManager yarn
ng set --global packageManager=yarn
ng lint: 运行代码规则检测ng test: 运行单元测试ng e2e: 运行端到端测试ng add: 添加一个第三方库到项目中,并且将其自定义配置也添加到项目中。如何写一个可以用ng add添加的自定义配置的第三方包?
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了解决vue-cli输入命令vue ui没效果的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,这篇文章主要给大家介绍了关于Vue导出Excel功能的相关资料,需要的朋友可以参考下
这篇文章主要给大家分享用JS做简单的网页留言板功能的内容,留言板的功能还是比较实用的,很多场景都能用到,本文有实现代码供大家参考,感兴趣的朋友可以了解看看,希望大家阅读完这篇文章能有所收获,下面我们一起来学习一下吧。
文本给大家分享的是js中this和箭头函数,其中关于this关键字是很多新手学习JavaScript时,比较难理解。箭头函数是新增的,小编觉得比较有意思,因此下文给大家介绍一下。对js中this和箭头函数感兴趣的朋友就继续往下看吧。
目录vue弹窗关闭后刷新效果问题解决关闭或刷新vue文件弹出提示框vue弹窗关闭后刷新效果问题列表点击进入详情时弹窗内容重新赋值,但是修改后未点击保存再打开同一个弹窗,数据是关闭前的样子。解决在双击时间里定义一个时间戳,每次点击传过去的值,在弹窗watch里接收时间戳再赋值。关闭页面清空对象。列表页:this.time
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008