Angular--配置Node.js

缺乏、安全感 2021-09-27 05:48 381阅读 0赞

*  前言
 *  内容
    
     *  步骤：
        
         *  1.下载Node.js
         *  2.安装Node.js
         *  3.开始配置Node.js
         *  4.安装typescript和typings
         *  5.安装@angular/cli
         *  6.新建AngularJS项目
         *  7.定位到项目目录
         *  8.安装项目依赖的所有node.js
 *  总结
 *  end

# 前言 #

> Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。  
> Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。  
> Node.js 的包管理器 npm，是全球最大的开源库生态系统。

AngularJS拥有自己配套的js文件，但是相比较使用效果没有node.js效果好，所以我们才在配置AngularJS的时候首先配置好Node.js。

# 内容 #

## 步骤： ##

### 1.下载Node.js ###

打开网站，查找Node，然后点击官方网站，进去下载。系统会根据您的电脑适合您电脑系统版本的Node.js文件（.msi文件），然后自动下载，如果不能自动下载，那么就找到自己电脑所需要的版本下载即可。  
![这里写图片描述][70]

### 2.安装Node.js ###

安装Node.js并不难，打开之后一直点击下一步就可以了，直到最后点击`Finish`之后，就说明已经安装好了。

### 3.开始配置Node.js ###

在安装好Node.js之后，就可以按下Ctrl+R，打开运行框，输入cmd，按下回车，即打开cmd命令提示符驶入，然后在里面输入如下内容：

npm install cnpm -g --registry=https://registry.npm.taobao.org

> **PS**:由于npm安装插件是从国外服务器下载，受网络影响很大，可能出现异常，继而淘宝团队生产一个完整的npmjs.org镜像，用cnpm代替npm, cnpm与nodejs的npm用法一致,只是在执行命令时，将npm改为cnpm点击回车键，直接执行。直到最后跳出，结束。此时可以在命令提示符中输入

cnpm -v

查看自己下载的cnpm版本。  
![这里写图片描述][70 1]

### 4.安装typescript和typings ###

继续在命令提示符中输入：

cnpm install typescript@2.2.2 typings –g

> **PS**:angular-cli是用typescript写的，所以需要安装typescript和typings  
> 直到最后跳出，然后输入

tsc -v

查看typescript和typings的版本，出现了版本号即为安装成功。  
![这里写图片描述][70 2]

### 5.安装@angular/cli ###

继续在命令提示符中输入：

cnpm install @angular/cli@1.0.0 –g

直到跳出安装，然后在命令提示符中可以输入

ng version

查看是否安装成功，如果出现了`Angular`的红色字体，那么恭喜你，说明已经安装成功了。  
![这里写图片描述][70 3]

### 6.新建AngularJS项目 ###

在命令提示符中输入

ng new angular-cli-project

> **PS**:angular-cli-project为Angular的项目名称PS:angular2的基本文件已经创建，接下来就是下载项目所依赖的nodejs包，用ng new angular-cli-project,直接创建如果不终止的话，默认用npm从国外网站下载资源，下载速度极慢。所以基本文件下载完毕之后，终止进程，然后用cnpm下载项目所依赖的nodejs包  
> ![这里写图片描述][70 4]

### 7.定位到项目目录 ###

在命令提示符中输入

cd angular-cli-project

此时箭头里面会包含`angular-cli-project`，即样式会改变成如下样式：

C:\Users\ITLuoxiaojun>                          //原来样式
    C:\Users\ITLuoxiaojun\angular-cli-project>      //输入之后的样式

### 8.安装项目依赖的所有node.js ###

在命令提示符中输入：

cnpm install

直到跳出，然后输入

ng server

如果出现如下代码，说明安装成功  
![这里写图片描述][70 5]

# 总结 #

第一次安装的时候需要细心，要不然没有经历过这方面的练习的话，很容易会出错。

# end #

谢谢您的阅读！

[70]: /images/20210923/93c3b42047a44099b4b0b020ee3a2d22.png
[70 1]: /images/20210923/094868539d1846b9915c301eff361432.png
[70 2]: /images/20210923/6df673d73b7a49d3b5e24f789e83921e.png
[70 3]: /images/20210923/80f35ae3dc05482683e1e8549815319f.png
[70 4]: /images/20210923/52b1a7cb82a7404bbd9078694d4e1b34.png
[70 5]: /images/20210923/8a1ef84414964da7870fda8441689b9d.png