npm install audit 初始

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

npm :基于包的规范实现的一个包管理工具

  • npm install 包名

当执行npm install的时候,它会自动跑到npm的网站,然后找到该包的github地址,

找到之后,下载这个压缩包,然后在执行npm install的当前目录下找一个叫做node_modules目录

如果找到,直接解压这个压缩包,到node_modules目录下

如果找不到,则新建一个node_modules目录,解压到该目录

  • npm install -g 包名

表示全局安装

npm在安装的时候,在全局设置了一个安装目录,只要是全局安装就会把包安装到这个目录里面去

npm install -g 包名 只要是全局安装就是安装命令行工具

  • npm install 缩写 npm i

当执行npm install的时候,会自动在当前目录中查找package.json文件

如果找到,找里面的 dependencies 字段,安装该字段中所有依赖的项

  • npm docs 包名

通风这个命令打开 包相对应的文档

  • npm install –save 生产环境

npm i -S jquery@3.*

咱们以后在做项目的时候,先初始化一个package.json文件,

在安装第三方包依赖的时候,必须使用npm install –save express,添加依赖项到package.json文件中,

实际就是添加到dependencies字段中

  • npm install -save-dev 开发环境

npm i -D jquery@3.*

咱们以后在做项目的时候,先初始化一个package.json文件,

在安装第三方包依赖的时候,必须使用npm install –save express,添加依赖项到package.json文件中,

实际就是添加到devDependencies字段中

  • npm config set prefix  修改全局安装目录

不建议使用,建议去文件夹里面改 C:\Users\用户名  里面有一个 .npmrc文件

去里面改prefix = C:\dev\npm  (写你的路径)

去全局的环境变量path里把C:\dev\npm  路径加进去

2.npm 和package.json结合着连

npm init    初始化package.json

npm install  先配置package.json里的devDependencies dependencies字段

npm i -S +包名 npm install –save  不光能下载包,还能把依赖添加到package.json

npm i -D +包名 npm install –save-dev 不光能下载包,还能把依赖添加到package.json

npm docs 包名  查看包的相关文件 jquery、mongoose、http-poster

npm list 当前目录有什么包,检测node_modules里面有什么

npm install –g 包名  全局安装 cnpm、nrm

3.cnpm

4.nrm

安装目录npm install -g nrm

nrm ls 查看数据源

nrm test 测试你的网连那个npm的数据源快

nrm use 切换数据源

一、npm安装包报错

npm ERR! ENOTEMPTY: directory not empty

使用以下命令删除node_modules文件夹

 rm -r node_modules

这将删除node_modules存储库中的文件夹。
然后使用命令:

npm install

二、 npm audit 基本介绍

# 允许开发人员分析复杂的代码,并查明特定的漏洞和缺陷
npm audit

# 检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖,而不必再自己进行跟踪和修复
npm audit fix

# 运行audit fix,但是只更新pkglock, 不更新node_modules
npm audit fix --package-lock-only

# 只更新dependencies中安装的包,跳过devDependencies中的包
npm audit fix --only=prod

# 运行命令,得到audit fix将会更新的内容,并且输出json格式的安装信息,但是并不真的安装更新
npm audit fix --dry-run --json

# 得到json格式的详细检测报告
npm audit --json

前端成神之路-CSS初识

css

CSS层叠样式表

学习目标

  • 理解
  • css的目的作用
  • css的三种引入方式
  • 应用
  • css三种引用方式的书写
  • 通过样式规则给标签添加简单的样式
 

1.HTML的局限性

说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义,

比如:表明这是一个大标题,用 表明这是一个段落,用 表明这儿有一个图片, 用 表示此处有链接。很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点:

HTML说,我试试…

如果要改变下 高度或者变一个颜色,就需要大量重复操作

 

总结:

  • HTML满足不了设计者的需求
  • 操作html属性不方便
  • HTML里面添加样式带来的是无尽的臃肿和繁琐

2.CSS 网页的美容师

  • 让我们的网页更加丰富多彩,布局更加灵活自如。
  • CSS的最大贡献就是: 让 HTML 从样式中脱离, 实现了 HTML 专注去做 结构呈现,样式交给css

我们理想中的结果: 结构(html)与样式(css)相分离 这句话要记住

而且。。。。。 CSS 做的很出色,如果JavaScript是网页的魔法师,那么CSS它是我们网页的美容师,不信,你看:

3.CSS初识

  • 概念: CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级联样式表)
  • 作用:主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
  • CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

4. 引入CSS样式表(书写位置)

要书写css样式,那css样式书写的位置在哪呢?

4.1 行内式(内联样式)

  • 概念:称行内样式、行间样式. ​ 是通过标签的style属性来设置元素的样式\n
  • 其基本语法格式如下:
<标签名 style=\"属性1:属性值1; 属性2:属性值2; 属性3:属性值3;\"> 内容 </标签名>

实际上任何HTML标签都拥有style属性,用来设置行内式。

  • 案例:
<div style=\"color: red; font-size: 12px;\">青春不常在,抓紧谈恋爱</div>

注意:

  • style其实就是标签的属性
  • 样式属性和值中间是:
  • 多组属性值之间用;隔开。
  • 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余
  • 缺点: 没有实现样式和结构相分离

4.2 内部样式表(内嵌样式表)

  • 概念: ​ 称内嵌式\n ​ 是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
  • 其基本语法格式如下:
<head>\n<style type=\"text/CSS\">\n    选择器(选择的标签) { \n      属性1: 属性值1;\n      属性2: 属性值2; \n      属性3: 属性值3;\n    }\n</style>\n</head>
<style>\n     div {\n        color: red;\n       font-size: 12px;\n   }\n</style>

注意:

  • style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。
  • type=“text/css” 在html5中可以省略。
  • 只能控制当前的页面
  • 缺点:没有彻底分离

综合案例

<style>\n   /选择器{属性:值;}/\n   p {\n        color:#06C; \n      font-size:14px;  \n       }  /文字的颜色是 蓝色/\n   h4 {\n      color:#900;\n   }\n   h1 {\n        color:#090; \n      font-size:16px; \n     }\n   body { \n      background:url(bg2.jpg);\n   }\n</style>
思考:\n 1. 如何实现结构与样式完全分离?\n 2. 如何实现css样式共享?

4.3 外部样式表(外链式)

  • 概念:\n ​ 称链入式\n ​ 是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,\n ​ 通过link标签将外部样式表文件链接到HTML文档中
  • 其基本语法格式如下:
<head>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"css文件路径\">\n</head>

注意:

  • link 是个单标签
  • link标签需要放在head头部标签中,并且指定link标签的三个属性

属性作用 :定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。我们都可以省略

 

定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

团队约定-代码风格

样式书写一般有两种:

  • 一种是紧凑格式 (Compact)
h3 { color: deeppink;font-size: 20px;}
  • 一种是展开格式(推荐)
h3 {\n   color: deeppink;\n    font-size: 20px;    \n}

团队约定-代码大小写

样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。

/ 推荐 /\nh3{\n   color: pink;\n}\n   \n/ 不推荐 /\nH3{\n  COLOR: PINK;\n}

5. 总结CSS样式规则

使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,

具体格式如下:

 

总结:

  • 选择器用于指定CSS样式作用的HTML标签,花括号内是对该对象设置的具体样式。
  • 属性和属性值以“键值对”的形式出现。
  • 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
  • 属性和属性值之间用英文“:”连接。
  • 多个“键值对”之间用英文“;”进行区分。

CSS3 3D转换

1 .三维坐标系

三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。

x轴:水平向右 注意: x 右边是正值,左边是负值 \n  y轴:垂直向下 注意: y 下面是正值,上面是负值\n  z轴:垂直屏幕 注意: 往外面是正值,往里面是负值

3D 转换主要学习工作中最常用的 3D 位移 和 3D 旋转

主要知识点

  • 3D位移: translate3d(x,y,z)
  • 3D旋转: rotate3d(x,y,z)
  • 透视: perspective
  • 3D呈现 transfrom-style

1.2 3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。

1>translform:translateX(100px):仅仅是在x轴上移动\n    2>translform:translateY(100px):仅仅是在Y轴上移动\n  3>translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)

4>transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离

因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动

1.3 透视 perspective

在2D平面产生近大远小视觉立体,但是只是效果二维的

1>如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。

2>模拟人类的视觉位置,可认为安排一只眼睛去看

3>透视我们也称为视距:视距就是人的眼睛到屏幕的距离

4>距离视觉点越近的在电脑平面成像越大,越远成像越小

5>透视的单位是像素

透视写在被观察元素的父盒子上面的

d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。

z:就是 z轴,物体距离屏幕的距离,z轴越大(正值) 我们看到的物体就越大。

1 .4 translateZ

translform:translateZ(100px):仅仅是在Z轴上移动。\n   有了透视,就能看到translateZ 引起的变化了

1>translateZ:近大远小

2>translateZ:往外是正值

3>translateZ:往里是负值

1.5 3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转。

语法

  1. transform:rotateX(45deg):沿着x轴正方向旋转 45度
  2. transform:rotateY(45deg) :沿着y轴正方向旋转 45deg\n
  3. transform:rotateZ(45deg) :沿着Z轴正方向旋转 45deg
  4. transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)

左手准则

判断X轴正负值

左手的手拇指指向 x轴的正方向\n  其余手指的弯曲方向就是该元素沿着x轴旋转的方向

判断Y轴正负值

左手的手拇指指向 y轴的正方向\n  其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)

transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)\nxyz是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度。

1>transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg

2>transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg

1.6 3D呈现 transfrom-style

控制子元素是否开启三维立体环境。。

  • transform-style: flat 子元素不开启3d立体空间 默认的
  • transform-style: preserve-3d; 子元素开启立体空间
  • 代码写给父级,但是影响的是子盒子\n  这个属性很重要,后面必用

案例:两面翻转的盒子

<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    <title>Document</title>\n    <style>\n        body {\n            perspective: 400px;\n        }\n        \n        .box {\n            position: relative;\n            width: 300px;\n            height: 300px;\n            margin: 100px auto;\n            transition: all .4s;\n            /* 让背面的紫色盒子保留立体空间 给父级添加的 */\n            transform-style: preserve-3d;\n        }\n        \n        .box:hover {\n            transform: rotateY(180deg);\n        }\n        \n        .front,\n        .back {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            border-radius: 50%;\n            font-size: 30px;\n            color: #fff;\n            text-align: center;\n            line-height: 300px;\n        }\n        \n        .front {\n            background-color: pink;\n            z-index: 1;\n        }\n        \n        .back {\n            background-color: purple;\n            /* 像手机一样 背靠背 旋转 */\n            transform: rotateY(180deg);\n        }\n    </style>\n</head>\n\n<body>\n    <div class=\"box\">\n        <div class=\"front\">快乐是我的</div>\n        <div class=\"back\">也是你的</div>\n    </div>\n</body>\n\n</html>

案例:3D导航栏

<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    <title>Document</title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n        }\n        \n        ul {\n            margin: 100px;\n        }\n        \n        ul li {\n            float: left;\n            margin: 0 5px;\n            width: 120px;\n            height: 35px;\n            list-style: none;\n            /* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */\n            perspective: 500px;\n        }\n        \n        .box {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            transform-style: preserve-3d;\n            transition: all .4s;\n        }\n        \n        .box:hover {\n            transform: rotateX(90deg);\n        }\n        \n        .front,\n        .bottom {\n            position: absolute;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%;\n        }\n        \n        .front {\n            background-color: pink;\n            z-index: 1;\n            transform: translateZ(17.5px);\n        }\n        \n        .bottom {\n            background-color: purple;\n            /* 这个x轴一定是负值 */\n            /* 我们如果有移动 或者其他样式,必须先写我们的移动 */\n            transform: translateY(17.5px) rotateX(-90deg);\n        }\n    </style>\n</head>\n\n<body>\n    <ul>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\">也是你的</div>\n            </div>\n        </li>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\">也是你的</div>\n            </div>\n        </li>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\">也是你的</div>\n            </div>\n        </li>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\"也是你的</div>\n            </div>\n        </li>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\">也是你的</div>\n            </div>\n        </li>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\">也是你的</div>\n            </div>\n        </li>\n    </ul>\n</body>\n\n</html>