From f42743f107c2d2d91496e8efdaaa1d05fb0f6bee Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 24 May 2022 19:59:43 +0800 Subject: [PATCH] =?UTF-8?q?add:=20npm=E7=89=88=E6=9C=AC=E5=8F=B7=E7=9A=84?= =?UTF-8?q?=E5=90=AB=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 02-CSS基础/08-CSS属性：定位属性.md | 2 +- 02-CSS基础/10-CSS3选择器详解.md | 2 +- 02-CSS基础/12-CSS3属性详解：动画详解.md | 2 +- .../02-开始写JavaScript：hello world.md | 2 +- .../11-流程控制语句：选择结构（if和switch）.md | 11 ++++---- 11-Node.js/03-Node.js开发环境安装.md | 25 +++++++++++++++---- 17-前端综合/2022年-前端日记.md | 9 +++++++ README.md | 2 +- 8 files changed, 39 insertions(+), 16 deletions(-) diff --git a/02-CSS基础/08-CSS属性：定位属性.md b/02-CSS基础/08-CSS属性：定位属性.md index f5b76ca..3a296fd 100644 --- a/02-CSS基础/08-CSS属性：定位属性.md +++ b/02-CSS基础/08-CSS属性：定位属性.md @@ -193,7 +193,7 @@ PS：负数表示相反的方向。 为了理解“**首屏**”二字的含义，我们来看一下动态图： -![](http://img.smyhvae.com/20180115_2200.gif) +![](https://img.smyhvae.com/20180115_2200.gif) 问题： diff --git a/02-CSS基础/10-CSS3选择器详解.md b/02-CSS基础/10-CSS3选择器详解.md index b3980f1..802a107 100644 --- a/02-CSS基础/10-CSS3选择器详解.md +++ b/02-CSS基础/10-CSS3选择器详解.md @@ -318,7 +318,7 @@ CSS中有一些伪类选择器，比如`:link`、`:visited`、`:hover`、`:activ CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的**结构伪类选择器**：即通过**结构**来进行筛选。 -**1、格式：（第一部分）** +**1、格式：（第一部分）**（重要） - `E:first-child` 匹配父元素的第一个子元素E。 diff --git a/02-CSS基础/12-CSS3属性详解：动画详解.md b/02-CSS基础/12-CSS3属性详解：动画详解.md index e6e1d7b..1b78d36 100644 --- a/02-CSS基础/12-CSS3属性详解：动画详解.md +++ b/02-CSS基础/12-CSS3属性详解：动画详解.md @@ -561,7 +561,7 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想* 效果如下： -![](http://img.smyhvae.com/20180208_1650.gif) +![](https://img.smyhvae.com/20180208_1650.gif) ### 4、倾斜 diff --git a/04-JavaScript基础/02-开始写JavaScript：hello world.md b/04-JavaScript基础/02-开始写JavaScript：hello world.md index a637431..f270dd5 100644 --- a/04-JavaScript基础/02-开始写JavaScript：hello world.md +++ b/04-JavaScript基础/02-开始写JavaScript：hello world.md @@ -1,5 +1,5 @@ --- -title: 02-JavaScript书写方式：hello world +title: 02-开始写JavaScript：hello world --- ## 开始写第一行 JavaScript：hello world diff --git a/04-JavaScript基础/11-流程控制语句：选择结构（if和switch）.md b/04-JavaScript基础/11-流程控制语句：选择结构（if和switch）.md index 3342eb9..d45f010 100644 --- a/04-JavaScript基础/11-流程控制语句：选择结构（if和switch）.md +++ b/04-JavaScript基础/11-流程控制语句：选择结构（if和switch）.md @@ -1,6 +1,5 @@ --- title: 11-流程控制语句：选择结构（if和switch） -publish: true --- @@ -30,7 +29,7 @@ a = 2 ## 流程控制语句 -在一个程序执行的过程中，各条语句的执行顺序对程序的结果是有直接影响的。所以，我们必须清楚每条语句的执行流程。而且，很多时候我们要通过控制语句的执行顺序来实现我们要完成的功能。 +在一个程序执行的过程中，各条语句的执行顺序对程序的结果是有直接影响的。所以，我们必须清楚每条语句的执行流程。而且，很多时候我们要通过控制语句的执行顺序来实现我们想要的业务逻辑和功能。 ### 流程控制语句分类 @@ -235,7 +234,7 @@ switch(表达式) { （2）然后，如果所有的 case 都和表达式的值不匹配，就会执行 default 语句体部分。 -default不一定要写在最后面。 switch 中的 default 无论放到什么位置, 都会等到所有case 都不匹配再执行。default 也可以省略。 +default不一定要写在最后面。 switch 中的 default 无论放到什么位置，都会等到所有case 都不匹配再执行。default 也可以省略。 ### switch 语句的结束条件【非常重要】 @@ -250,7 +249,7 @@ default不一定要写在最后面。 switch 中的 default 无论放到什么 switch 后面的括号里可以是变量、常量、表达式， 通常是一个**变量**（一般的做法是：先把表达式存放到变量中）。 -case 后面的`值1`、`值2`可以是变量、常量、表达式。 +case 后面的值可以是变量、常量、表达式。 注意，**case的判断逻辑是`===`，不是`==`**。因此，字符串`'6'`和 数字 `6` 是不一样的。 @@ -599,11 +598,11 @@ switch (day) { ### if 和 switch如何选择 -如果是对区间进行判断，则建议用 if。如果是对几个固定的值的判断，那么，数量少的话用 if，数量多的话用switch。 +如果是对区间进行判断，则建议用 if。如果是对几个固定的值进行判断，那么，数量少的话用 if，数量多的话用switch。 ### 用 return 代替 if else -业务场景： +业务场景举例： 我们在实战业务中涉及到调接口时，一般会这样做： diff --git a/11-Node.js/03-Node.js开发环境安装.md b/11-Node.js/03-Node.js开发环境安装.md index b9ddfb5..4203ef0 100644 --- a/11-Node.js/03-Node.js开发环境安装.md +++ b/11-Node.js/03-Node.js开发环境安装.md @@ -389,6 +389,23 @@ NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议 ![](http://img.smyhvae.com/20180302_1210.png) +### NPM包的版本管理 + +NPM包的管理都是通过项目根目录的 `package.json`文件实现。 + +当你使用 npm 安装一个包或者更新一个包的时候，package.json 里会自动添加**包名和包的版本**。npm 默认安装**符合条件**的最新版本，然后在版本号之前添加`^`符号。 + +NPM包的版本号，是用三位数表示。版本号前面的符号，代表开发者想要更新的的最新版本条件： + +- 符号`^`：固定第一位数。表示主版本固定的情况下，可更新至最新版。例如 `vue: "^2.6.0"` 表示 2.6.0及其以上的2.x.x 都是满足的。 +- 符号`~`：固定前两位数。表示次版本固定的情况下，可更新至最新版。例如 `vuex: "~2.6.0"`，2.6.0及其以上的2.6.x都是满足的。 +- 无符号：三位数都固定。无符号表示固定版本号。例如 `vue: "2.6.0"`，此时一定是安装`2.6.0`版本。 + +参考链接： + +- [请将你的npm依赖版本锁定](https://juejin.cn/post/6960928446826741796) + + ## NPM 的常用命令 查看 npm 当前版本： @@ -616,10 +633,8 @@ cnpm install vue 就可以执行这个 js 程序，直接在命令行查看运行结果。 -## 我的公众号 +## 赞赏作者 -想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +创作不易，你的赞赏和认可，是我更新的最大动力： -扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： - -![](https://img.smyhvae.com/20200102.png) +![](https://img.smyhvae.com/20220401_1800.jpg) diff --git a/17-前端综合/2022年-前端日记.md b/17-前端综合/2022年-前端日记.md index 4256627..7893fb8 100644 --- a/17-前端综合/2022年-前端日记.md +++ b/17-前端综合/2022年-前端日记.md @@ -7,3 +7,12 @@ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', ``` +### 2022-04-27 + +在flex布局的容器里，如果发现某个子元素的尺寸与预期不符，说明这个子元素可能是被挤掉了。 + +解决办法是给这个子元素设置如下属性，则表示它不会被挤压： + +``` +flex-shrink: 0; +``` diff --git a/README.md b/README.md index 7058f57..0f74138 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ ## 前言 -前端入门到进阶图文教程，超详细的 Web 前端学习笔记，从零开始学前端，做一名精致优雅的前端工程师。持续更新中... +千古前端图文教程，超详细的 Web 前端入门到进阶学习笔记。从零开始学前端，做一名精致优雅的前端工程师。持续更新中... 通俗易懂，不懂技术也能学。此前端教程不玩猫腻，不会设置任何套路，因为我**相信启蒙的重要性**。