前言
本次开发使用angular6结合ng-Zorro完成前端的开发。本次组内的前端由我来搭建。本次搭建过程是在前辈的基础上做的,所以有一些可以复用的功能为本次搭建节省了很多的时间,不过这个学习的过程还是很宝贵的。
搭建步骤
温馨提示
(1)angular开发使用,目前实践典型项目有ITOO-PC端/physical-PC端。
(2)使用ng-zorro组件库开发。
(3)样式使用 .less文件,less是一门向后兼容的 CSS 扩展语言。
一、环境配置:
前端环境要求(Node已经升级到10.15.0版):
步骤:
1.1检查全局环境
打开cmd,输入ng version,查看本地的环境配置,如果满足要求则可以直接搭建项目,生成的项目与本地环境一致。
如果本地环境不能满足,则需要对本地的nodejs和脚手架升级(也可不升级全局环境,生成项目后只升级项目中的环境)。
环境升级
1.1.1Nodejs升级到最新版本
- 清除缓存(npm cache)
npm cache clean -f - 安装n模块
npm install -g n --force - 下载nodejs
官网下载nodejs 最新版本,地址:https://nodejs.org/en/ 。 - 安装nodejs
需要将下载的msi镜像覆盖安装:使用where node找到node以前安装的路径,然后将最新版本安装到此路径下
1.1.2脚手架升级到6.2.4版本 - 卸载之前版本
npm uninstall @angular/cli -g - 清除缓存
npm cache verify - 安装6.2.4版本
npm install @angular/cli@6.2.4 -g
1.2搭建项目
- 生成项目
在目录下打开cmd命令,生成一个名为test-cook的项目。
ng new test-cook,等待最后会提示successfully。
- 使用vs code 或 webstorm打开项目
- 配置仓库
npm config set refgistry http://registry.npmjs.org - 安装全局yarn
npm install yarn -g
如果已经安装了yarn,可以跳过此步骤。 - 下载node_modules
输入命令 yarn。 yarn等同于npm install,使用yarn可以将兼容的包下载下来,相比于npm install更加安全。 - 启动项目
ng serve -o (-o会自动打开网页)
1.3创建workspace
①引入ng-zorro组件:ng add ng-zorro-antd
添加workspace组件(app表示在app这个目录下创建的组件,workspace为新建的组件的名称):
一个空组件:
ng g component -p app --styleext=less --name=workspace
确定好使用某个Zorro样式时:
ng g ng-zorro-antd:layout-custom-trigger -p app --styleext=less --name=workspace
②创建 .module.ts、.routes.ts文件,确定路由跳转。
路由分为同步路由与异步路由,同一层级的创建同步路由,有下一层级的创建异步路由。
1.4在workspace下创建各模块
根据各模块需求创建模块,配置路由。