Angular 开发环境配置 – Angular CLI安装

谁借莪１个温暖的怀抱￠ 2022-05-24 11:50 233阅读 0赞

Angular 提供了一个命令行工具，可以简化我们的程序开发。我们今后的开发也会使用这一工具，因此我们需要首先安装这个名为 Angular CLI 的开发工具。

一    首先你需要安装好nodejs

[nodejs][]

下载安装nodejs

![70][]

对于服务器和追求稳定的朋友，稳定性通常是第一考虑要素，因而 Node.js 推荐大多数用户使用8.11.2 LTS 长期支持版

这里是学习使用，就使用最新版10.2.1

win+r  输入cmd   再输入node -v  出现版本号说明安装成功

二安装nrm

**npm**install \-gnrm

`install -g nrm`意味着在全局安装 nrm 模块,用于切换npm的 Registry 的地址，获得更快的下载速度

![70 1][]

切换到淘宝的镜像,下载速度会快一些

nrm use taobao

nrm ls 前面有星号说明这是正在使用的镜像地址

![70 2][]

也可以选择用yarn,使用 Yarn 替代 NPM

https://yarnpkg.com/zh-Hans/docs/install\#windows-stable

下载安装就行了，

三安装Angular CLI

npm install -g @angular/cli

![70 3][]

如果遇到ng不是内部或外部命令，也不是可运行的程序

需要更新一下npm，或者配置一下环境变量

npm install -g npm

再运行

<table style="margin-left:0px;font-size:12px;line-height:inherit;font-family:Consolas, ConsolasRegular, 'Courier New', monospace;vertical-align:baseline;background-color:rgb(248,248,255);color:rgb(102,102,102);margin-top:0px;margin-right:0px;margin-bottom:0px;padding:0px;border:none;border-spacing:0px;width:auto;background-image:none;table-layout:auto;"> 
 <tbody style="margin:0px;padding:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;"> 
  <tr style="font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;background:0px center;margin:0px;padding:0px;border-style:none;vertical-align:top;"> 
   <td style="border-width:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;background:0px center;width:816.8px;margin:0px;padding:0px;font-family:Consolas, ConsolasRegular, 'Courier New', monospace;vertical-align:top;"> 
    <div style="margin:0px;padding-right:0px;padding-left:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;vertical-align:baseline;color:rgb(0,0,0);white-space:pre;padding-top:5px;padding-bottom:3px;border:none;line-height:15px;background:none;"> 
     <div style="margin:0px;padding:0px 5px;border:0px;font-style:inherit;font-variant:inherit;font-family:inherit;vertical-align:baseline;background:0px center;height:inherit;"> 
      <span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-family:inherit;vertical-align:baseline;height:inherit;font-weight:bold;">yarn</span> 
      <span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-family:inherit;vertical-align:baseline;height:inherit;color:rgb(0,111,224);"> </span>global 
      <span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-family:inherit;vertical-align:baseline;height:inherit;color:rgb(0,111,224);"> </span>add 
      <span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-family:inherit;vertical-align:baseline;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-family:inherit;vertical-align:baseline;height:inherit;color:rgb(51,51,51);">@</span>angular 
      <span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-family:inherit;vertical-align:baseline;height:inherit;color:rgb(0,111,224);">/</span>cli 
     </div> 
     <div style="margin:0px;padding:0px 5px;border:0px;font-style:inherit;font-variant:inherit;font-family:inherit;vertical-align:baseline;background:0px center;height:inherit;"> 
      <br> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

四 新建工程

下面我们来创建第一个示例工程，了解 Angular CLI 的基本使用

cd F:

cd到F盘不然会默认安装到c盘

ng new mydemo

`new`是创建一个全新项目，后面的`demo`是项目的名字

![70 4][]

进入项目目录

cd mydemo

运行

ng serve --open

然后打开浏览器输入

localhost:4200就行了

![70 5][]

参考文章：

https://www.devbean.net/2017/12/learning-angular-02-ng-cli/

https://blog.csdn.net/etemal\_bright/article/details/79398631

[nodejs]: https://nodejs.org/en/
[70]: /images/20220524/9bc2c8c97f9343daadbf5786de92ad51.png
[70 1]: /images/20220524/fbea9ceb0e2e44359290bd1d675764f2.png
[70 2]: /images/20220524/0911545d8abf41e685934b9c36f6c491.png
[70 3]: /images/20220524/c418eb75fa6845ab898b481479b705ce.png
[70 4]: /images/20220524/6cd7cff41f2944b69601396086b9706d.png
[70 5]: /images/20220524/e3a87c114ad0428d9d9ee40f406bfb0b.png