Angular的开发环境搭建

你好！这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

Nodejs安装

我们使用的Angular6前端开发框架需要安装Node.js的8.x或10.x版本。可以在下面的网站下载安装包：
https://nodejs.org/en/download/
在这里插入图片描述

我用的是这个版本，windows系统64位的。
运行安装包，选择相关的路径，主要注意点如下选择add to path,因为这样会自动给你配置对应的环境变量，其余的都是直接下一步下一步然后install：

想要检验是否安装成功可以执行两个命令node -v 和npm -v(这个主要高版本的nodejs会在安装的过程中自动帮你安装的，主要的作用是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西) 分别查看版本信息。

Nodejs使用前的准备工作

1.在安装目录D:\Program Files\nodejs下创建两个文件夹node_global和node_cache，主要防止执行其他安装命令时候将东西安装在C盘里面，希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中。
在这里插入图片描述
2.新建文件后在执行命令行cmd，然后执行下面两个语句

    npm config set prefix "D:\Program Files\nodejs\node_global"
    npm config set cache "D:\Program Files\nodejs\node_cache"

3.接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”，系统变量下新建NODE_PATH，填写好对应的路径：
在这里插入图片描述

修改默认的用户变量D:\Program Files\nodejs\node_global：

安装Angular Cli

CLI是Command Line Interface的简写。用来创建项目、创建应用和库代码，并执行多种开发任务，比如测试、打包和发布。

由于国内被墙，安装过程中可能会报错。所以可以使用梯子，或者使用淘宝镜像。

这里以使用淘宝镜像为例：
运行命令：npm config set registry https://registry.npm.taobao.org
运行命令：npm install -g @angular/cli
因为fsevent是Mac osx系统的，而我是在Windows下安装，所以出现的警告可以忽略。

开发工具Visual Studio Code的安装

开发工具我们推荐使用Visual Studio Code，可以直接在官网上下载使用：
https://code.visualstudio.com/
在这里插入图片描述
这个开发工具有很多优点，比如能够使用自定义编辑器改变布局，图标，字体和配色方案；支持插件的扩展，说到插件，顺便再推荐几个前端使用Angular框架开发常用的插件吧：

Auto Close Tag：可以自动添加HTML/XML关闭标签
Chinese (Simplified) Language Pack for Visual Studio Code：中文语言包
Debugger for Chrome：使用谷歌浏览器进行调试
scss-lint：保存scss文件时，通过下划线和/或突出显示scss文件中的错误
TSLint (deprecated)：保存ts文件时发现文件中的错误（目前此扩展已弃用）

创建Angular项目

1、进入要创建项目的目录，在cmd命令框中输入：

ng new +项目名称

（ps：最好使用英文）；
在这里插入图片描述
2、在项目创建到绿色字体出现的时候，按CTRL+C，终止批处理操作。使用cmd命令：

cd+创建的项目所在文件夹

进入项目文件夹，再输入Angular命令：

cnpm install

（因为使用ng命令创建项目会从npm上拉取需要的一些文件，但是由于npm是国外的服务器，所以会很卡，而且很耗时间，所以终止操作，改为从cnpm上拉取相应的文件）
在这里插入图片描述
也可以直接打开项目文件夹，按住Shift键，点击鼠标右键，弹出菜单，选中“在此处打开命令窗口”，然后使用“cnpm install”命令；
3、安装完cnpm之后，测试是否安装成功：cnpm -v
4、然后用VScode打开项目文件；
5、生成模块和组件：

ng g c 组件名称
ng g c 组件名称 --routing      // 需要配置其module和路由配置

生成模块之后：
生成module和routing之后要导入SharedModule和NgZorroAntModule：

import { SharedModule } from './shared/shared.module';
import { NgZorroAntdModule } from 'ng-zorro-antd';

注意：正常会被注入根组件，要从根组件删除！

Angular起步——环境搭建