目录
学习任务:
开发环境配置。
学习目标:
了解前端/angular生态的常见工具。npm、包依赖机制、eslint、菜鸟教程、mdn、ide常用操作快捷键、postman、nginx代理
实习学习输出:
npm:
全称是Node Package Manager,顾名思义是“节点的包管理器”,是NodeJs包管理和分发工具。利用npm可以进行JavaScript包的下载、升级,也可以把自己开发的JavaScript包共享给其他使用者。
常用指令:
npm -v | npm版本查询工具 |
npm install <package> -g | 全局安装 |
npm install <package>@version | 安装指定版本 |
npm install <package> | 默认会安装最新版本 |
npm install <package> --save-dev | 表示需要安装的包是项目依赖 |
npm install <package> --D | |
npm search <package> | 查找模块 |
npm uninstall <package> (-g) | 卸载安装包(全局卸载) |
npm update | 更新包,将包更新到最新版本 |
npm update -g <package> | 更新指定的全局包 |
npm ls | 查看安装的模块及依赖 |
npm root [-g] | 输出node_module的路径 |
npm config set registry="http://XXX.org" | 设置npm的下载镜像 |
Npm -version | 查看模块版本 |
Npm start/stop | 开启/停止模块 |
包依赖机制:
nodeJS项目中都会有package.json文件存在,这个文件会记录运行该项目的所有依赖,在实际中一个npm包往往会依赖于其他几十个包,这些被额外依赖的包是不会再package.json文件中,只会记录在node_modules安装包下的package.json文件中
一般package.json 文件中内容如下:
Package.lock.json文件:
Package.lock.json文件内部记录着每一个依赖的实际安装信息,例如名字,安装的版本号,安装的地址,额外的依赖的依赖的也会写进来,使得整个文件是一个树形结构,保存依赖嵌套的关系:
目的是保证在开发过程中
1.团队成员安装的版本依赖一致
2.node_modules目录下一般不会被提交到代码库,所以未来回溯到某一天的状态就需要使用到package.lock.json文件进行状态保存
3.在安装过程中,npm会自动检查node_modules目录中已有的依赖包,并和package.lock.json文件进行比较,重复的包会跳过安装能优化安装时间
package.lock.son文件
eslint:
是一个开源的插件化的JavaScript代码检测工具。Javascript是一个弱类型语言,开发中容易出错,因为没有编译程序。Eslint具有检查代码规则,这些规则可以自己生成也可以用它提供的,进而对代码进行检测。其中的规则分为内置规则和自定义规则,,每条规则各自独立,可以开启会关闭,可以将结果设置成警告或错误。
ESlint 的安装 | Npm i -g eslint |
Eslint -h | 查看命令行工具的所有选项 |
For -direction | 强制“for”循环中更新自居的计数器朝着正确的方向移动 |
Getter-return | 强制getter函数中出现return语句 |
no-dupe-args | 进制function定义中出现重命名参数 |
Use-isnan | 要求使用isNaN()检查NaN |
菜鸟教程:
菜鸟教程angularJS官网,可以自行求解https://www.runoob.com/angularjs/angularjs-tutorial.html
安装angular环境
1.在nodejs=12.18.3版本下执行指令
npm install @angular/cli@9.1.12
安装完成之后,在webstorm中创建一个angular Cli项目day2
在cmd命令下,进入到当前项目目录,执行指令ng serve,运行当前项目
得到“英雄之旅”界面