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 🎜>

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

~angular.json

3.2 Buat fail baharu (jana | g)

akan mencipta ng generate service demo baharu dalam folder semasa. demo.service.ts

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）

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

在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!