使用角CLI生成角5项目教程详解

  

如果您正在使用角,但是没有好好利用角cli的话,那么可以看看本文。

  

角CLI官网:https://github.com/angular/angular-cli

  

安装角cli:

        npm安装- g @angular/cli      

不过首先要确保您安装了比较新版本的nodejs。

  

今天主要通过以下几个方面介绍角CLI:

  
      <李>生成项目李   <李>参数介绍李   <李>配置和自定义CLI李   <李>检查和修复代码李   <李>生成新项目:李   
        ng新的app      

这个命令会生成一个新的项目叫做<代码>我的程序> 我的程序代码这个文件夹下。

  

项目生成完的时候别忘了cd进入到我的app目录。

  

另一个选项是使用,即将参数:

        ng新的app——即将      

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

  

使用角CLI生成角5项目教程详解

  

另外一个常用的参数是<代码>——skip-install :

        ng新的app——skip-install      

这个命令作用是,生成完项目文件之后不执行<代码> npm安装这个动作。

  

不过以后还是需要手动执行<代码> npm安装的。

  

使用,帮助参数可以查看帮助:

        吴新,帮助      

使用角CLI生成角5项目教程详解

  

  

下面我要生成一个项目,先不执行npm安装:

  

使用角CLI生成角5项目教程详解

  

这个速度非常快,然后使用我最喜欢的IDE VSCode将其打开:

        代码。      

看看整个的项目结构,以及package.json:

  

使用角CLI生成角5项目教程详解

  

脚本下面是一些预定义的项目命令:

  

开始是运行项目的意思,执行npm开始即可,或者直接执行ng服务也可以。

  

npm构建/ng构建是执行构建.......

  

不一一介绍了。

  

然后看下附件:

  

我们使用的是角5.2.0,前面的^符号表示,我们使用的版本号是大于等于5.2.0的但是肯定会小于6 .

  

最下面是devDependencies,里面都是开发时用的工具库,可以看到角cli就在里面。

  

接下来看看angular-cli.json这个文件:

  

<强> angular-cli.json:

  

它是角cli针对该项目的配置文件。

  

使用角CLI生成角5项目教程详解

  

里面的前缀比较有趣,它是所有生成的组件和指令的默认前缀。

  

可以查看一下app.component.ts:

  

使用角CLI生成角5项目教程详解

  

它的前缀就是应用。

  

如果想更改默认前缀的话,就可以修改angular-cli。json文件里面的前缀属性值了,如果改成销售,那么以后生成的组件和指令的前缀就是销售。但是对已经生成的组件/指令就不起作用了。

  

那么如何保证生成的项目的组件/指令前缀是您想要的呢& # 63;

  

就是使用ng新的另一个参数——prefix:

        ng新sales-app——prefix销售      

使用角CLI生成角5项目教程详解

  

这时里面生成的组件的选择就是:

  

使用角CLI生成角5项目教程详解

  

angular-cli.json文件里面的前缀:

  

使用角CLI生成角5项目教程详解

  

在生成的项目里可以看的到,同时还生成了规范文件。如果我不想让我的项目生成规范文件呢& # 63;

  

使用角CLI生成角5项目教程详解