Angular CLI를 사용하여 Angular 5 프로젝트를 생성하는 방법에 대한 자세한 튜토리얼

이 글은 Angular CLI를 사용하여 Angular 5 프로젝트를 생성하는 자세한 튜토리얼을 주로 소개합니다. 필요한 친구들이 참고하면 됩니다.

Angular를 사용하고 있지만 Angle cli를 잘 활용하지 못했다면 이 글을 읽어보세요.

Angular CLI 공식 홈페이지: https://github.com/angular/angular-cli

Angular CLI 설치:

npm install -g @angular/cli

하지만 먼저 최신 버전의 nodejs를 설치해야 합니다.

오늘은 주로 Angular CLI를 통해 소개합니다. 다음 측면:

• 프로젝트 생성

• 매개변수 소개

• CLI 구성 및 사용자 정의

• 코드 확인 및 수정

• 새 프로젝트 생성:

ng new my-app

이 명령은 새 프로젝트 이름을 my-app으로 지정하고 프로젝트 파일을 my-app 폴더에 넣으세요. my-app并把该项目的文件放在my-app这个文件夹下.

项目生成完的时候别忘了cd进入到my-app目录.

另一个选项是使用--dry-run参数:

ng new my-app --dry-run

使用这个参数呢, 不会真的生成项目, 而是会打印出来如果创建该项目的话哪些文件将会生成.

另外一个常用的参数是--skip-install:

ng new my-app --skip-install

这个命令作用是, 生成完项目文件之后不执行npm install这个动作.

不过以后还是需要手动执行npm install

프로젝트가 생성되면 my-app에 CD를 넣는 것을 잊지 마세요. .Directory.

또 다른 옵션은 --dry-run 매개변수를 사용하는 것입니다.

ng new --help

이 매개변수를 사용하면 실제로 프로젝트가 생성되지 않지만 프로젝트가 생성되면 생성될 파일이 인쇄됩니다.

일반적으로 사용되는 또 다른 매개변수는 --skip -install입니다. :

code .

이 명령의 기능은 프로젝트 파일을 생성한 후 npm install 작업을 실행하지 않는 것입니다.

그러나 여전히 npm install를 사용하세요.<p></p> 도움말을 보려면 --help 매개변수를 사용하세요.<p style="max-width:90%"><pre class="brush:php;toolbar:false;">ng new sales-app --prefix sales</pre><img alt="" src="https://img.php.cn/upload/article/000/000/008/af1dd2b22f7c1afdd6b1060ed949b1f1-3.png"></p> <p></p> 다음으로 npm install을 실행하지 않고 프로젝트를 생성하고 싶습니다.<p></p> <p></p> <p>이 작업은 매우 빠릅니다. , 그리고 내가 가장 좋아하는 IDE를 사용합니다. VSCode로 엽니다:</p><pre class="brush:php;toolbar:false;">ng new my-app2 --skip-tests</pre><p>전체 프로젝트 구조와 package.json을 살펴보세요.</p> <p></p> <p></p>scripts 다음은 사전 정의된 프로젝트 명령입니다.<p></p>start는 프로젝트를 실행한다는 뜻입니다. npm start, 아니면 ng Serve를 직접 실행해도 됩니다. <p><strong>npm build / ng build는 빌드를 실행하는 것입니다...</strong></p>하나씩 소개하지는 않겠습니다.<p></p>그 다음 종속성을 살펴보겠습니다.<p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/af1dd2b22f7c1afdd6b1060ed949b1f1-4.png">우리는 각도 5.2.0을 사용하면 앞의 ^ 기호는 우리가 사용하는 버전 번호가 5.2.0보다 크거나 같지만 확실히 6보다 작을 것임을 나타냅니다.</p> <p>하단은 개발 중에 사용되는 모든 도구 라이브러리인 devDependency입니다. .Angular cli가 들어있는 것을 볼 수 있습니다.</p> <p>다음으로angular-cli.json 파일을 살펴보세요:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/e854d94b3c17e0ab4f00ed9e63a5a737-5.png">angular-cli.json:</p> <p></p>이 프로젝트의 Angle cli 구성 파일입니다. <p></p> <p></p> <p>내부 접두사가 더 흥미롭습니다. 이는 생성된 모든 구성 요소와 지시문의 기본 접두사입니다. </p> <p style="text-align: center"> app.comComponent.ts를 확인할 수 있습니다. <img alt="" src="https://img.php.cn/upload/article/000/000/008/e854d94b3c17e0ab4f00ed9e63a5a737-6.png"></p> <p></p> <p style="text-align: center"> 접두사는 <img alt="" src="https://img.php.cn/upload/article/000/000/008/e854d94b3c17e0ab4f00ed9e63a5a737-7.png"></p>입니다. 기본 접두사를 변경하려면 angle-cli.json을 수정하면 됩니다. 파일의 접두사 속성 값이 sales로 변경되면 향후 생성되는 구성 요소 및 지시문의 접두사는 sales가 됩니다. 하지만 생성된 구성요소/지시문에는 작동하지 않습니다.<p></p>그렇다면 생성된 프로젝트의 구성요소/지시문이 원하는 것인지 확인하는 방법은 무엇입니까? <p style="max-width:90%"><img alt="" src="https://img.php.cn/upload/article/000/000/008/e854d94b3c17e0ab4f00ed9e63a5a737-8.png"> ng new - --prefix의 다른 매개변수를 사용하세요. : </p><pre class="brush:php;toolbar:false;">ng serve -o</pre><p></p> <p></p>내부에서 생성된 컴포넌트의 선택자는 <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/04c3a02740d94515dec6ecfb405b023f-9.png"></p> <p></p>angular-cli.json 파일입니다. 접두어: <p></p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/a548a6b20d49edcde3b8a5cc3c1ba554-10.png"></p>은 생성된 프로젝트에서 볼 수 있으며, 스펙 파일도 생성됩니다. . 내 프로젝트에서 사양 파일을 생성하지 않으려면 어떻게 해야 하나요? <p></p>ng 새 매개변수에는 --skip-tests: <p><pre class="brush:php;toolbar:false;">ng set defaults.styleExt css</pre></p> <p></p> <p> </p>의 매개변수가 생성되지 않는 것을 볼 수 있습니다. 🎜ng 새로운 포함 사항: 🎜🎜🎜🎜🎜다음과 같은 몇 가지 사항이 도입되었습니다. 🎜🎜--skip-git: 프로젝트를 생성할 때 git 저장소로 초기화되지 않습니다. 기본값은 git 저장소로 초기화되는 것입니다. 🎜🎜--directory: 생성된 디렉터리를 설정할 수 있으며, 기본값은 사용된 프로젝트 이름입니다. 🎜🎜--style: 예 스타일 유형을 설정합니다. 예를 들어 CSS로 변경할 수 있습니다. scss.🎜<p>也可以通过--inline-style把样式的写法设为行内样式, 这个默认是false的.</p> <p>下面我来生成一个使用scss样式的项目:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/a548a6b20d49edcde3b8a5cc3c1ba554-11.png"></p> <p>可以看到生成的是styles.scss, app.component.scss文件, angular cli不仅会生成scss文件, 而且也会编译它们.</p> <p>查看angular-cli.json, 可以在文件的下方看到采用的是scss样式文件:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/a548a6b20d49edcde3b8a5cc3c1ba554-12.png"></p> <p>这样, 以后生成的component的默认样式文件就是scss了.</p> <p>最后我想介绍一下这个参数, --routing:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/d228b925a19ca7796d8941157ced7c91-13.png"></p> <p>如果想手动为项目配置路由的话, 还是需要一些步骤的, 所以可以使用这个参数直接生成带路由配置的项目.</p> <p>看一下项目路由文件:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/d228b925a19ca7796d8941157ced7c91-14.png"></p> <p>再查看一下app.module:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/d228b925a19ca7796d8941157ced7c91-15.png"></p> <p>可以看到import了AppRoutingModule.</p> <p>综上, ng new 的这些参数可以在生成项目的时候作为命令的参数联合使用, 其中有一些参数也可以在项目生成以后通过修改angular-cli.json文件来做修改.</p> <p>比较推荐的做法是:</p> <p>在生成项目的时候使用: --routing, --prefix, --style, --dry-run参数. 首先通过--dry-run参数, 确保会生成哪些文件是否正确, 确认后把--dry-run参数去掉, 生成文件.</p> <p>下面我生成一个项目, 并且执行npm install:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/89dd4af338f4a88c2bbcbb9e822569f6-16.png"></p> <p>命令执行完, 可以看到如下的项目结构;</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/89dd4af338f4a88c2bbcbb9e822569f6-17.png"></p> <p>里面有node_modules目录了, 也就是所有的包都安装好了, 接下来我可以运行该项目了:</p><pre class="brush:php;toolbar:false;">ng serve -o</pre><p>其中的-o(--open)参数表示运行项目的时候打开默认浏览器.</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/89dd4af338f4a88c2bbcbb9e822569f6-18.png"></p> <p>查看浏览器http://localhost:4200:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/0c4fe80d1c6bea4ea440321788dfcf4a-19.png"></p> <p>ng serve的优点是, 当代码文件有变化的时候会自动重新构建并且刷新浏览器, 您可以试一下.</p> <p><strong>另外一种配置CLI的方法 ng set.</strong></p> <p>前面我介绍了使用ng new参数和修改angular-cli.json文件的方式来配置cli, 下面我介绍下通过ng set 1fe5bf869dfca240f55513a4fa45fc47 f0464fc328e77ed3a5392ffbcda634c1 来配置cli.</p> <p>就拿当前这个项目来说, 它的默认样式文件类型是scss:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/0c4fe80d1c6bea4ea440321788dfcf4a-20.png"></p> <p>如果我在该项目目录执行:</p><pre class="brush:php;toolbar:false;">ng set defaults.styleExt css</pre><p>那么该项目的设置就会改变:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/0c4fe80d1c6bea4ea440321788dfcf4a-21.png"></p> <p>如果使用参数 -g(--global), 那就会进行一个全局的配置, 这个配置会保存在一个文件里(如果还没有任何去安居配置的情况下这个文件并不存在), 这个文件应该在users/xxx目录下, mac的话应该在home目录下.</p> <p>它不会影响到已经存在的项目. 但是如果新生成的项目不指定ng new的参数情况下, 默认就会采用全局的配置:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/0c4fe80d1c6bea4ea440321788dfcf4a-22.png"></p> <p style="text-align: left"><strong>Lint:</strong></p> <p>使用命令ng lint.</p> <p>首先可以查看一下帮助:</p><pre class="brush:php;toolbar:false;">ng lint --help</pre><p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/6a38d36c78853f759bd3f828232799d9-23.png"></p> <p>--fix: 尝试修复lint出现的错误.</p> <p>--format: lint的输出格式.</p> <p>首先我针对上面的my-app6执行ng lint:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/6a38d36c78853f759bd3f828232799d9-24.png"></p> <p>没有问题.</p> <p>然后我故意弄出来几处错误/不规范的写法:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/6a38d36c78853f759bd3f828232799d9-25.png"></p> <p>然后再执行ng lint:</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/a368816de3e4ff88becc425ffd8b3216-26.png"></p> <p>이러한 오류가 자세히 나열되어 있는 것을 확인할 수 있습니다.</p> <p>형식 매개변수를 추가하세요.</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/a368816de3e4ff88becc425ffd8b3216-27.png"></p> <p>lint 결과 표시가 이제 더 직관적인 것을 확인할 수 있습니다.</p> <p>lint --fix 아래에서 ng를 실행하세요. :</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/a368816de3e4ff88becc425ffd8b3216-28.png"></p> <p>실행 후에는 Lint 오류가 1로 줄어듭니다. 코드를 살펴보세요.</p> <p style="text-align: center"><img alt="" src="https://img.php.cn/upload/article/000/000/008/b358171672a339a24dda54fff42aecb3-29.png"></p> <p>위 내용은 앞으로 모두에게 도움이 되기를 바랍니다. </p> <p>관련 기사: </p> <p><a href="http://www.php.cn/js-tutorial-398836.html" target="_blank">vue-cli scaffolding-configuration 파일 bulid </a></p> <p><a href="http://www.php.cn/js-tutorial-398834.html" target="_blank">jQuery+ajax를 사용하여 json 데이터를 읽고 가격 예시 </a></p> <p><a href="http://www.php.cn/js-tutorial-398835.html" target="_blank">vue 버튼 구성 요소 개발을 위한 샘플 코드 </a></p>

위 내용은 Angular CLI를 사용하여 Angular 5 프로젝트를 생성하는 방법에 대한 자세한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!