Apakah cli sudut? Bagaimana untuk menggunakan

Apakah Angular cli? Artikel ini akan membawa anda melalui cli Angular dalam Angular dan memperkenalkan cara menggunakan Angular cli saya harap ia akan membantu anda.

1. Apakah Angular cli

Ia ialah alat antara muka baris arahan yang boleh digunakan untuk permulaan, pembangunan, pembinaan dan penyelenggaraan aplikasi Sudut. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

2. Cara memasang

Muat turun nodej dahulu tanpa npm

https://nodejs.org/en/download/

npm install -g @angular/cli

Anda juga perlu membawanya jika anda ingin menyahpasang -g

npm uninstall -g @angular/cli

3. Cara guna

new|n bermaksud n adalah singkatan dari new, kesannya sama, sama di bawah.

3.1 Cipta projek (baharu | n)

ng new my-project

Ia akan mencipta projek asas sudut dan memuat turun kebergantungan untuk menjalankan projek Port lalai ialah 4200.

Kandungan tersuai yang mungkin perlu digunakan

Format penggunaan adalah seperti berikut:

 ng new my-project --xxx=x

Nilai lalai berikut adalah palsu

< melainkan dinyatakan sebaliknya 🎜>

参数	意义
`--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，

Ya, tiada penyesuaian semasa menciptanya, bagaimana saya boleh membetulkannya? Tukar terus dalam

~angular.json

3.2 Buat fail baharu (jana | g)

Buat fail asas baharu dengan coretan kod pratetap di dalamnya. Contohnya,

akan mencipta ng generate service demo baharu dalam folder semasa. 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

Terdapat cara yang lebih mudah:

Muat turun pemalam Angular Files dalam vscode dan cari

untuk mencarinya. Buat di mana sahaja anda mahu. Rasanya bagus untuk digunakan. Kemudian saya akan menulis pemalam yang berguna untuk sudut pembangunan vscode~alexiv.vscode-angular2-files

3.3 Jalankan projek (layan | s)

3.4 打包项目（build | b）

配置	意义
--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则以生产环境的方式打包，进行摇树优化等操作。

--configuration详解

当我需要打成不同的环境包时，可以使用以下方法：

在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"
                                }
                            ],
                            ...
                        }
                    },
                    
                }
            }
        }
    }
}

之后可以进行不同的环境打包：

• qa: ng build --c=qa
• sit: ng build --c=sit
• prod: ng build --c=production

--c 是 --configuration的缩写

3.5 更新项目（update ）

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

3.6 其他

• ng lint: 运行代码规则检测
• ng test: 运行单元测试
• ng e2e： 运行端到端测试
• ng add: 添加一个第三方库到项目中，并且将其自定义配置也添加到项目中。如何写一个可以用ng add添加的自定义配置的第三方包？

更多用法更新于 github

https://github.com/deepthan/blog-angular

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Apakah cli sudut? Bagaimana untuk menggunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!