angular4+ng-zerro后台管理系统搭建

电商后台管理系统系统界面搭建

搭建一个项目首先需要的环境，之后根据所需要的页面创建组件，再结合一个页面框架快速的搭建一个项目答题页面框架

一、开发环境

1.安装node.js

去官网下载安装包，地址： https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

安装好之后测试是否安装成功

node --version

2.安装angular-cli

npm uninstall -g @angular/cli  卸载旧版本cli。
npm cache clean  清除缓存，确保卸载干净

npm install -g @angular/cli

二、搭建项目

安装好之后就可以创建新项目的

ng new Project

然后根据自己项目的需要创建几个需要的组件，例如：

做完这些之后，为了开发方便引入界面搭建框架ng-zerro

具体教程可以参照网址：https://ng.ant.design/docs/introduce/zh

引入ng-zerro框架之后要在app.module.ts文件里面引入配置信息，

然后就可以正式搭建页面了

三、搭建页面架构

可以在ng-zerro中选择基本框架布局，地址：https://ng.ant.design/components/layout/zh#components-layout-demo-top-side-2

然后把template里面的代码赋值到项目的app.html文件中就形成了初始的页面布局，也可根据自己的需要进行增加和删除，网址布局最下面有配置参数。

四、配置页面路由

根据项目需求进行路由的配置，包括左侧点击的收缩栏和右侧展示栏两部分，这里以app模块为根组件，然后进行页面的搭建，把其他新建的组件在app-routing.module.ts文件里进行路由设置，如下：

也要在app.html文件中进行路由跳转配置，routerLink="需要跳转到的路由"，这样就可以实现点击左侧栏，右侧跳转到不同的界面

之后就可以根基项目界面的不同进行不同页面的开发。