粉丝8816获赞26.2万

好,别说话,看屏幕。我们给大家介绍一个 ui 框架,那这个 ui 框架是以莱克们的,由我们饿了么团队去研发的。我们的。首先 ui 框架呢,我们首先看他长得怎么样。对,这是我们的按钮,长得呢,很好看,多姿多彩。那么再看我们的滑块,那滑块呢,我讲究的是如丝般顺滑,他也做到了 放表单,是我们经常用的下拉框,不必说哎,中规中矩,很好。再看我们的日期,选择框,也挺好哎,很朴素简洁。 再看我们的弹框,哎,这个弹框呢,各式各样的弹框供你选择,非常好。再看一张卡片,哎呀,这卡片做的果然是送外卖的,非常好。最后呢,我们来看个抽屉,哎,这种样式呢,也挺好看,不错,大家可以使用一下这个 ui。

大家好,我是学习原地的特约导师高若风,那下节课呢,我们了解一下 mpm, 你就知道他是一个包管理工具,怎么样一个管理流程?当然不了解呢,也不要紧,那 随着咱们会使用了,那你自然也就了解他是干嘛的了,因为后期的学习也好,工作也好,你都离不开他了。当然了,不光是我们前端有这样的包管理器,你像皮皮啊,拍死那扎瓦呀,都有这些,你比如皮皮的烤 pose, 对吧?也是一个管理皮皮的一个包管理器, 是这样的,那我们看一下 npm 我们怎么安装他?那你不能说我单独下载一个 npm 的软件,然后双击安装,然后呢? 苹果电脑啊,使命运操作系统啊,或者是温度操作系统呢?是不一样的,对不对?但是不是说这么下载全装的,因为什么?因为 npm 它是什么?它是和 no 的 gs 是相辅相成的。 诺诺的 gs 呢?因为是服,他相当于是服务器端的开发语言,但他的语法结构呢,其实就是加速 girl, 对吧?那诺诺基 s 呢?是一个在德国工作的一个美国程序员,叫啥名?我不记得了,写的对不对?写了一个诺诺基 s, 但是能够的 gs 呢,缺了一个包管理器,于是呢,他就和这个 npm 的作者呢,一拍即合,抱团取暖,对吧?一加一大于二的,最终呢,露的 gs, no 的 gs, 你说这个 no 的内置了 npm, 然后来大家都知道 no 的 gs 火了,对不对?那随着 no 的 gs 火爆,那大家开始呢,用 npm 共享加速快速代码了, 那比如说像解块呀,或者刷子呀,那也将他们的代码发布到什么那个 npm 这个仓库里去了,所以现在你在使用什么解块啊或者刷子,你直接一个 npm e 四到就可以把它安装上了。所以说现在 在 npm 来分享代码已经成了前端的标配了,知道吧?所以呢, npm 是 no 的 gs 默认的软件包管理器, 所以你得先安装 no 的 gs, 你只要安装了 no 的,就会默认安装好了 npm, 所以我们安装 no npm 就要安装 no 的,其实是,对吧,那 npm 只是 no 的 gs 下边的一个小工具,听懂吧。另外呢, npm 本身呢,也是基于诺基亚的开发的一个软件,那我们下载 no 的安装,我们需要到这个网站是 no 的 gs, 到中国微网站看一下,有加一点新看中啊, no g s 的一个。呃,中文网,但是你可以在搜索引擎里去搜索啊,都可以,你可以使用文档啊什么的。但是 no g s 呢,是咱们后边的那个课程啊,不是咱现在的课, 咱现在讲前端框架呢,你可以弄的一点都不贵,再稍微了解一下就行。下载这里边呢,你可以下载,根据你的操作系统操作都一样,对不对?那我这个呢,是 windows 的安装包对吧,六十四倍的,所以一点击这个直接就下来了,那我这块呢也已经下载下来了。嗯,给大家找一下看一下, 在我的下载里边就这个看到了吗?双击一下就可以了,双击一下,然后你就装就可以了,就跟其他的软件装起是一样的,你看下一步对吧?同意协议,下一步对吧?装到哪呢?就装到这吧,对吧?下一步,下一步, 一路下一物,什么也不用管,安装就可以了,和我们装其他的,如果接触其他的服务器的语言是一样的,比如说你这台机器作为服务器,你装皮皮对吧?装,呃, 扎瓦环境装拍摄环境,对吧?也都是这样的。那都弄的 js, 就是下载一个软件去装,然后结束关闭就 ok 了。那怎么能验证它可不可以呢?如果你已经打开那个,行了,把它关闭掉,你需要重打开一下,打输入 cmd 吧,或者是在地板里边这块输入 cmd 都可以,对吧?然后你查看一下 n o d e 杠 v 看一下, 装了一个最新版本,十四点幺,五点幺,这样漏的就装完了,那漏的装完了,你就可以看一下,漏的里边自带一个工具,对吧?咱不用说打开到他安装幕下打开去看到,对不对?你直接这样就行。 n p m 杠 v 看一下也装上了, 看到了吗?六点一,四点八,也就是我装的是最新的,漏的,漏的里面带的呢? npm, 最新的版本也是这个。那如果你想 重新安装这个 npm, 重新安装这个 npm, 那你直接 npm, 因为他本身就有这工具了,对不对?那装任何软件包的时候都是因此到,当然了也可以简写成一个音 i 也是可以的啊,因此到这样全程更好一些,对不对?再装 npm, 然后 杠 g 加上这个就是全集全局安装,他会到什么 n p m 仓库里边,你看自己装自己对不对?真的用低版本的装一个,我没有指定版本号,这些参数我都会讲,对不对?杠 g, 记得全局安装就会装到你的什么?呃,环境变量 那个,比如说再拧一下 us logo 下面,对不对?全局去安装,有,在任何位置都可以使用 tm, 不然他也是全面装的,不然的话我随便打开一个键夹,他不一定能用,对不对?来再装一下,你看这样的话就开始 去安装 npm 了,本身他就自带 npm, 我只不过用完 pm 再装一下 npm, 等待一下。好,那咱们看一下他能不能把最新的版本给我们拉下来, 我们再单位一下,六点幺四点九,你看默认装的是六点幺四点八,对不对?因为我们使用的是最新版本吗?差一个小版本,差距不大,记住版本号都是由三个组成的,对吧?看我这个后边咱们要用,这样 pm 我们就装完了,对吧?那想卸载呢?你就 npm 什么用?一扫二扫对不对就可以了。那 npm 装完之后,那我们怎么使用它呢?你看啊,我们怎么使用它?比如说我现在想装几块瑞,对吧?那我们看一下它的软件里面有没有,对吧?我们说了到这个网站这里边呢,都是这个 包搜索的这个网站,对吧?搜一下解快锐,解 qq 一二 y, 解快锐,让我们搜索一下,你搜到什么就能装什么。而且呢,你可以指定装个版本,因为我现在用那个,呃,四 g, 所以呢,这个网速有有一些慢,另外呢,你看啊,这个是国外的网站对吧?访问呢肯定慢,你光访问查询慢, 你在下载安装的时候他也慢,所以呢,假如说我们想下载这几块儿位,我们安装,我们先直接安装一下,那现在安装的时候你要记住 我们在哪个目录下使用,你得找到你的项目目录,你比如说我在这里边新建一个文件夹,在我的桌面啊,你可以在西盘地盘哪都可以,对不对?我们新建一个, 比如说叫做啊 n n p 啊我的项目吧这块,或者我叫做,比如说啊 etubook, 那假如说我的一个项目到这块来就项目,那我如果直接在这块 npm npm, 因此到去装几块, 如果我直接这么去安装的话,展现一下,他会在我的这个目录下,你就在哪目下执行这个命令,他就会默认你这是项目目录,就会在哪个下边去安装,就会在哪下面去安装。那我现在新建在桌面新电影目录, 我进入桌面,进入 etv 这个目录。第二,现在文件夹是空的,对不对?是空的,什么都没有,你看我只用 n p m, 因此到,对吧?我使用什么?解宽睿 让记全局安装,对吧?哪块都可以使用,意思呀?当然我们这个因此刀啊,几块啊这些没有前后顺序啊,你直接用哪个都行,对吧?只要只用这几个就行了,你看抓了, 然后我们第二看一下,看一下,那为什么 这没有呢?因为我使用了一个杠 g, 对吧?装到全局去了,也就是在所有的地方都能用,不光是这个项目用,其他项目也可以用,所以他不会在这个项目的部下。那假如说我安装的时候,对吧?我把这个,呃,当然全局在哪我就不找了,我把这杠器去掉, 你看一下,我们再装一下,这样呢?在我的项目里边居然装,你看出现了两个出现了两个,一个呢是这个包管里的派克 a 这包吗?对不对?锁文件叫金色一个呢是什么?一个是我们解快锐摸懂这个目录,那你装一个软件,在这里边有一个,那如果我再装一个呢?你看啊,看我这个目录,你看我再装一个,比如说 n p m, 因此到 意思到我装一个什么呢?装一个,呃,不起爪宝宝,但你先搜所有没有这个软件的装,但是当时知道是有这个软件的,对不对?刚去装,你看这个地方就会有 这个等等待一下,我是比较慢,呃, npm 啊,这呢, boss 上下一批,你看这块找到了,看到了吧,也就是你下载一个包,这里边就有一个目,下载一个包,安装一个就有一个目,对吧? 共用这一个 lower 在这呢,这就是我们用 npm 去装这个呃,软件包,但是呢,现在装的感觉呢?怎么是 比较慢的?咱先选这个简单的面料,一会咱们再详细的使用这里边其他的那些面料,你看装的是比较慢的,怎么办呢?因为它是在国外的网站,咱没翻墙,对不对?那怎么办呢?那你可以使用国内的一些镜像,比如说使用,咱们使用比较多的是淘宝的镜像 这块,嗯,这个地方搭搭建环境是通过如下代码将 npm 设置成淘宝进项。那我们先来查看一下现在我 你们用的这个镜像,也就是现在这个包从哪哪个仓库里边下载过来的,你看使用 npm, 照着这个命令查看修恩 f i g get 得到这个 像阿 e g s t r y, 你看啊,得到这个,你看,通过 n p m g i 点儿 g r g, 通过这个官方网站我们来下载的,对吧?那我们现在想把它变成淘宝的呢?你看这是 n p m, 对吧?这是 配置文件得到配置文件里边的这个选项。那配置文件的咱们下下角上会讲配置文件,从配置文件得到这个选项,那么我们就可以 npm 新闻 iphone 键, 每个软件都有配文件的,那我可以设置,那设置 i g s t r y, 是不是就可以设置这个选项啊?设置这个选项,淘宝的进项链接。那全局,你如果刚刚搁 logo 或者刚 g, 对吧?就刚搁 logo 吧, 我说话粘贴一下,粘贴一下,你看就会在全局去设置这个景象,那么你在任何地方 下载的时候,对吧?都走这个镜像了,再下载就不是从这下载了。来,你看我们镜像设置完了之后,我们再通过 n p m 啃这个 get r e g i g i s t r y, 我们再看一下,哎,没有设置,没有设置成功,你看他使用的还是什么,还是这个镜像,我们粘一下。 npm 淘宝点拖拉机 设置,是不是看我这个视频里做啊,然后我们再得到这个镜像,哦,还没有转过来, 暧昧提示,是不是我们地址什么写错了呢? npm npm 这个设置镜像,给个地址搬个格罗布。 那咱们换另外一种方法,你看啊,用这个工具切换淘宝,那 n p, 呃,使用 n p s n r m, 使用淘宝来切换一下, 切换网速比较慢,直接的等待一下,如果配不上感恩没 来,那我们就切换一下,好,用了二十多秒。来来,我们现在再得到一个印象,你看就变成了我们 npm 淘宝这个了,对不对?切换一下,这样就过来了,这样的话我再安装 刚解快的时候,比如说 npm, 因此到减 q u 一二 y 九二 v, 那我再回车他就会快一些,快一些。因为什么?因为我现在使用的是这个镜像,那如果再切回去 同样的办法,你使用什么?这个设置默认的地址,对吧?设置这个就行了,就可以什么切回去了,当然你还可 可以怎么全局给他改成另外一个命令,如果你不切换的话, npm, 因此到钢琴给一个别的命令,比如 cnpm, 那么下次你用的就不是 npm 了,是 cnpm。 那每次用 cnpm 的时候到淘宝镜像里边,你用 npm 的时候,他到默认镜像这块 去找,就这意思,所以呢,有的时候你可以定制一个这个命令,当然了,我们没有的必要,对不对?那样的话感觉怪怪的,所以呢,我们直接切换一下 就可以了,这就是设置镜像和如何查看镜像,那这个呢,就完成了 n t m 的安装,我们用 n p m 安装了一下解快锐和珠子刷,对吧?那 安装的时候呢,我们也把这个仓库的地址由国外的福气切换回了国内的阿里的福气,对吧?就这样的一个过程啊,这就是我们这节课的一个任务,安装 npm。 好,谢谢大家。

hello, 各位小伙伴,在这一小节呢,我们学习基础架构中的如何使用 uni u i 组建库, 那在我们的小兔先小程序里面呢,基础架构会分为有三部分,分别是构建界面状态管理和数据交互。那我们这一小节呢,先学习构建界面,那具体要分为哪几个步骤呢?我们一起看一下啊。 首先第一步就是安装 uni ui 主监控,那当然,那么多的主监控,为什么我们选择 uni ui 呢?哎,主要是因为 uni ui 是 uniap 官方出品,所以呢,我们使用的时候呢,更加安全放心,而且它支持多端。 那第二个呢,就是我们装完组件库之后呢,需要配置一下组件的自动导入,因为啊,在我们用的时候,当然还是希望他能自动完成导入, 而省去我们需要写很多个 important, 那这个呢,待会我们也会重点的去讲解。那第三个呢,就是针对 uni u i 哎,增强一下这个 t s 类型的检查,那我们现在呢,切换到 uni up 的官网,看一下如何使用 uni u i 主线库, 那我们打开 uniap 的官网,那在这里呢,我们看到 uniap 官网主键这一张呢,哎,就有这个叫做 uni ui, 它其实啊是属于扩展主键,是基于内置主键的一个补充,那我们现在看一下它如何使用吧,那我们点击一下开始使用这一张, 哎,那使用的方式呢,他有多种,但是呢,多种方式一定要选择一个合适自己的,那我们在这里呢,哎,一起看一下啊。其实呢,对于我们来说,推荐使用 mpm 的方式,因为啊对 h b x 这种方式呢,是不是你得必须依赖到这个工具,那就有点受限了,而对于单独导入的这种方式呢,那就显得不太好维护,所以呢,综合考虑啊,主要我们是选择 m p m 这种方式安装, 那看文档的时候一定要小心谨慎啊,那我们往下翻一下,哎,找到哪一个?是不是找 m p m 安装的呀,然后往下滚动一下,哎,那我们找一下安装命令,哎,在这里是不是找到了一个安装 uni u i, 这是不是就是具体的安装命令啊?那我现在呢,把这个命令复制一下, 回来到我们的编辑器打开那打开一下这个终端了。好,我们开一个新的终端,粘贴一下这个命令。那当然,我们在项目中是不是选择用 pmpm, 所以呢,我这里呢升级一下这个 pmpm, 等待它的安装好了,那 现在呢,安装成功了,那刚刚我们说过,装完了之后,第二步是不是想要看一下他如何自动导入啊?那因为啊,我们看到左侧这里呢,是不是有非常之多的主线,用一个导一个,那这个太繁琐了啊,那我们继续看一下文档如何实现自动导入, 那在这里呢,哎,出现了一个新的配置,叫做 eccom, 那这个 eccom 呢,是属于 uniap 特有的,其实啊,就可以帮我们完成组件的自动导入, 那具体的配置呢?这里啊,官方也提供了,那我们现在呢选中它复制一下,哎,那需要在哪个文件中配置呢?哦,原来是在 page 点 jason 里面。好了,那我们复制完配置之后,回来到这个项目中, 找到我们的 pages 点 jason 这个文件。好,那我们粘贴一下刚刚官方提供的配置,那粘贴过来之 呢,我们也写一下啊,这个呢,鼠标悬停上去,那我们其实就会看到他的说明,就是逐渐自动导入的规则,那这个规则具体又是什么意思呢?我们现在呢再来解读一下啊。首先第一个 auto scan 呢,他其实啊,翻译过来叫做是否开启这个自动扫描,那梦值呢?是为 two, 那这个表示什么意思呢?哎,他其实啊是会查找我们 component 是这个文件夹是否有符合 unit 标准的一些组件,如果有,他其实可以帮我们自动导入,那当然,刚刚我们下组件是下到了这个文件里面吗? 哎,显然不是,我们刚刚是不是通过 mpm 的这种方式下载,那下载过来了之后呢,是不是应该到 note modules 里面啊?所以呢,在这里啊,其实他走的是第二个规则,他其实是以正则的方式 帮我们完成组件的自动导入,那个正则呢,我们也一起解读一下啊。正则呢?哎,前半部分就是我们具体的正则。首先,哎,这一块啊,他间括号,哎表示什么?开头,那他其实啊是匹配到在页面中,如果你出现了以 u n i 开头的这些组件, 那么点星号呢,就是表示提取出来这个组件的名字,哎,这个小括号包裹起来是不是就提取了呀?那提取出来了之后呢,那么在后面呢,哎,这个提取的结果,他就会在多了一,多了一这个位置替换过来。 好,我们现在呢也看一下,这里呢,其实啊,就是我们具体的一个包的路径,那我们现在呢也看一下啊,打开 node models, 我们看一下这个路径啊。好,这里呢有 d crow, 然后呢里面有 uni u i a, 我们找到果然有 l i i b 呢,就是对应了这里的 l i b, 然后呢 uni, 哎,这个多了。一是我们刚刚说到他会替换,那替换的时候呢,大家阅读一下,这规则是不替换的名字。哎,假如说啊,假如说你在页面中用到了这个叫做 uni branch, 那么这个 branch 呢?这个名字就会提取出来,最终呢,是不是替换到这里,替换到这里,所以呢,你在页面中用到了 uni branch, 他就能自动帮我们找到这个组件,并完成这个导入。好,原来他是这么一个工作原理啊。 好,那清楚了这个自动导入的规则之后呢,我们现在切换到我们的文档中,那我们拿一个主键,看一下他能否真的完成这个自动导入,打开我们的文档,那这里啊有非常自动的主键,那大家选一个吧,那我们就选择这个卡片主键吧, 卡片组件呢?我们在这里。哎,又有多种用法,那各位小伙伴想选哪一个呀?哦,选择这个代缩略图了是吧,那我复制一下这个代缩略图了。好,复制一下回来到页面中,那我们找到某一个页面,嗯,现在打开的是首页,那我直接在首页中添加 好粘贴过来。不过呢在这里啊,需要有一个注意事项啊,就是刚刚我们改完的配置,需要重启一下这个服务。我现在呢先把原本的这个服务啊,先给他关掉啊,先给他关掉,我们再开一个。 好,这里呢,怎么开这个服务来的?哎,对了,这个编译服务是 dv mp 微信,好,运行一下。好,我们重新等待一下编译,让这个 eccom 配置生效。好,那现有呢?正在工作了,那我在这一边按一下,保存好现有呢,大家发现 是不是他就能成功的显示出来我们刚刚复制过来的卡片组件,那我们现在呢,在这里,哎,大家发现这个组件是不是他就能正常工作?那现在组件已经能在页面中正常显示出来,我们再看一下当前在页面中用到组件的时候,有没有手动导入过这个组件, 哎,并没有,那为什么他能帮我们完成这个导入动作?哎,对了,是不是在 e c come 这里是不是通过 uniap 提供的一个配置去实现的? 当然我们在刚刚的时候呢,哎,用到的这个组件呢,哎,比如说叫做 unicar, 那 unicar 呢,他就会提取出来这个 car 的名字,最终呢,是不是在 note modus 里面?哎,是不是找到这个 car 的组件,最终呢帮我们完成了自动的导入,并且呢,这个呢,你在页面中用多少,他会加载多 多少?这个呢,性能啊,也是非常之棒的,那我们只需要按照官方的配置去配置好就可以了啊,那现在呢,配置完了这个之后呢,其实啊,在我们当前项目中还有一个小小的问题,就是我们当前的项目是不是一个 ts 项目, 那 ts 项目呢?我们希望是不是这个类型是不是更加的安全?那?因为 ts 非常之注重类型,但是我们现在鼠标悬顶上这个组件大家发现是一个 no, 那为什么是 no 呢? 哎,主要是因为 uni u i 啊,在开发的时候呢,其实是用 g s 开发的,并没有升级到这个 t s, 那所以呢,在官方啊提供的 uni u i 主监控呢,其实啊,并没有对应的类型声明文件,不过好消息是我们前端生态啊,非常之活跃,那已经有 热心的小伙伴为 uni un 提供了配套的类型声明文件,那我们一起也把这个类型声明文件安装一下,在项目中配置起来。 好,那我们现在呢打开一下 mpm。 好,那这里呢,其实啊,有一个叫 uni helper uni ui types 这一个包,那它其实就是提供 uni ui 的组件类型的, 那我们看一下具体怎么用啊,那往下滚动呢?哎,这里有使用的说明,其实啊,核心步骤就两步吧,第一步就是安装对你的依赖, 第二个呢,就是在 ts company 点 jason 里面配置一下这个 type 属性,那 type 属性呢,就是把刚哎上面这里的这个依赖包配置过来就可以了。好,我们现在呢动手做一下了啊,复制一下这样一个依赖包的命令,好,粘贴过来这里, 那我们开一个新的终端粘贴,那我们把这个 m p m 还是升级成 p m p m, 等待一下它的安装, 安装成功之后呢,我们现在呢在上面复制一下这个报名,然后呢,是不是 t s 项目是不是在 t s? 哎,对了, compat 点 jason, 那我们找到这个文件在 types 里面,哎,我们增加一下这个类型说明文件,按一下保存, 那我们现在呢再回来到 index 这个页面,哎,大家发现这个卡片组件颜色,这个标签颜色是不是变绿了,显得更安全?那鼠标悬停上去看呢,是不是也有对应的类型声明了呀, 那同时呢,有了类型声明啊,那我们再检查一下属性,哎,现在鼠标选定上去。哦,原来这个呢是卡片的一个标题文字,然后呢这个 subtitle 呢,是不是就是负标题的文字?那这里呢,就是我们安装完类型声 命文件之后呢,是不是他就有了呀?那这样子呢,用起来是不是更加的安全放心啊。好了,那这个呢,就是我们如何在项目中使用 uni ui, 那我们现在呢,把这个操作记录一下。 好,我们这里呢刚刚主要新增的是在项目中使用 uni 杠 u i 这个主建库啊,把它安装到了我们项目中。那提交完成之后呢,我们也切换到 ppt 总结一下啊。回来到 ppt 那,刚刚呢,我们讲解了在项目中如何使用 uni u i 组建库。那首先第一步是不安装 uni u i, 那安装的时候呢,我们在官网的时候呢,查找要注意啊,那当然,我们项目呢,哎,使用 pmpm, 所以这个命令也要稍微升级一下啊。那第二步,那在我们的项目中如何让这个组件完成这个自动导入,各位小伙伴还记得吗?哎,对了,有一个配 那个配置呢,非常之重要啊,是叫做 eccom, 这 eccom 呢,在这里的配置呢,我们刚刚也进行了一个解读,那因为啊,我们在项目中后面还会有一些叫做自定义的一些主见, 那我们也可以利用好这 eccom 这个配置,帮我们把自定义的一些全区组件完成这个自动导入,所以呢,这个配置,哎,我们要注意哦, 那第三个呢,就是 uni u i 啊,其实啊,官方并没有提供对应的类型说明文件,那当然我们前端生态是不是有对应的一个扩展包,那我们在这里呢,哎,下载一下这个第三方的包,然后呢在 t s ctrl 里面配置过来,是不是提供了 uni u i 的类型说明, 那所以呢,我们用起来是不是更加安全放心啊。好了,那这个呢,就是在我们项目中如何使用 uni ui 组建库,我们就总结到这里,那各位小伙伴也赶紧开始动手吧。

为什么用 opm 安装依赖又报错了?相信很多人在使用 opm 进行依赖安装的时候,也遇到过和我同样的各种报错问题,大部分报错的话是由于 notegs 版本所导致的。事情是这样的,前几天我想把自己写的一个前端项目在一个新的环境里面运行起来,结果我使用 opm 进行安装的时候,发现报了一堆错误, 大致的意思说我们这个当前这个版本需要升级一下,因为我之前的这个项目是用 vita 创建的, vita 创建的话它是需要我们这个就是 note g s, 就是升级到我们这个十七,结果我就查看一下,这就是当时报的错误,我查看一下我当前的这个 note g s 版本的话是十四, 我就升级到十七,但是说我旧的项目的话还是需要依赖于十四,所以说需要两个版本之间来切换的,这时候的话就需要用到。我今天给大家介绍这款 note gs 版本管理工具 nvm, 大家可以看到这就是这款工具啊,我们安装的话非常简单,我们只需要下载下来之后,然后下一 下一步就可以安装成功,安装成功之后我们用起这个命令就可以看到,大家可以看到这个图上所有的就是当前可安装的一个版本,我们只需要就是用这个命令的话,就是可以就是选择你要安装的一个版本,就我这边有写啊,就是我们安装某某版本就可以了, 安装好之后我们就 nvm list 就可以看到我们当前就是说安装到哪些版本,如果说前面有新号,表示说你当前选中的就是我们这十四点零点零,如果你想使用十六点一、八点一这个版本的话,你只需要输入这个命令,大家可以看到这个命令指定他一个版本就可以了。 好,指定好版本之后,我这个项目的话就成功运行起来了。我们再给大家介绍第二款版本管理工具啊,就是 notegs 版本管理工具,就是这个 n, 大家可以看到他是用我们这个 npm install 进行安装,他就可以安装到我们这个全局,这时候我们就可以用 n 这个命令来使用的 n list 的话就可以看到我们当前就是已下载的所有 版本。还有我给大家演示一下啊,因为这个的话我已经安装了,所以说我们只需要用 n, 然后的话比如说 list 就可以看到我当前安装了哪些,就是 note g s 的一个版本。

普通人也能开发一个 ui 组建库系列六,一分钟教你发布自己的第一个 npm 组建库。下面这个组建库就是我们前五个系列带着大家一起实现的。下面我们点击 get up 图标进入组建的元旦码,可以看见这个瑞丽赛斯,里面就是存放我们发布的版本, 我们点击这个一点零点三版本,里面就是这个版本的原代码了,它的作用就是方便后面出问题可以查询这个版本的原码。下面我们来到这个项目的 npm 包地址,可以看见右侧有版本的安装命令以及 get up 地址与版本信息。 说了这么多,那这个组建库的版本发布流程到底是什么呢?下面我们就带着大家亲手来发布这个 npm 组建包。首先要想发布 npm 组建包,你需要在这个页面注册一个 npm 账号,注册成功之后打开命令行输入 npm logan 命令进行登录,接着输入用户名密码邮箱 之后去邮箱内拿到验证码即可完成登录。登录成功之后,我们只需在这个项目的登录下执行 npm 乱 radism 即可。接着我们根据提示输入要发布的版本号,下面只需等待它自动打包发布就行了。好了,已经发布成功了,就这么简单。接着我们来到 npm 包地址,可以看见版本已经更新到了一点零点四了,下面重点来了,刚才的雷利斯命令到底做了什么呢?为什么一个命令就能完成发布呢?下面我们找到这个雷利斯命令, 可以看见他使用 sh 命令执行了 beat 文件夹下面的 red 脚本文件,我们来看看这个文件内部做了什么。首先生成一个输入框,提示用户输入发布的版本号,之后将用户输入的内容存储到这个窝选变量里面,下面使用一个二次确认,提示用户是否需要发布该版本。看到用户输入的指数 y, 就走进下面的发布流程中。 里面首先执行了项目的 beautylibo 打包命令,将代码打包准备发布,如果代码有修改,就添加一个卡密的把修改提交。下面就使用 npm watch 命令修改 package, 点接省文件内的版本号,修改完成之后就使用 的命令,将当年升级版本后的代码破解到远程的梦分之上。这个 touchy 的最终就是生成 get up 里面的这个 touchy 的版本信息。之后就是执行 npm publish 命令了,它是发布到 npm 包管理平台的核心命令,它的作用就是将 package 点接手文件内的 fails 配置项,配置的文件发布到 npm 包管理平台。 这里发布的这个 disco 文件夹就是刚才打包的代码,如果版本号内有贝塔字样,就给版本号生成一个贝塔标记。最后就使用问的克林命令给当前版本生成一个升级日字,这个日字的作用就是给开发者提供这个版本具体的修改内容是不是很简单,一个脚本就完成了整个发布过程,喜欢的话就点个关注哦,下集分享更有趣的钱庄知识!

前面的话我们讲了,我们可以在命令行去运行我们的 no 的,对吧?那我们现在的话,我们来写一下我们的文件来运行一下,那 ok, 那在这里的话,我们就是 啊创建了一个空的文件夹啊,就是在这里啊,有个 demo, 是吧?我们把它放到我们的这个编辑器里面,我们啊进行一个打开,那好,那现在话我们打开之后呢,我们创建一个文件啊,那 ok, 那比如说我们就是 demo 一,好吧? 好,那 ok, 那我们这一画我们要运行的就是我们的 js, 对吧?啊,那也就说我们现在得 no 的里面写的,是吧?就是我们的 js 嘛,那所以的话我们创建一个 js 文件, ok, 那在这里画,你可以看到我们这里画创建了一个 js 文件,对不对?好,创建好了之后呢,我们现在的话也来写一 下啊,刚才的一个操作,是吧?比如说我们的一个啊,啊,比如说赖特 a 啊,等于我们的三好,然后 let b 啊,等于我们的四好,那这句话我们啊打印一下我们的什么 a 加啊,三加四,是吧?三加四好, ok, 那也就说 a 加 b, 那好,那这一块我们啊就是一个正常的一个代码执行,对不对?我们通过我们 no 的来进行一个执行一下,那在这里的话我们可以什么?我们在 使用我们的这个中,就是我们要在这个编辑下去运行的话,我们可以,是吧点击我们的右键啊,在这里面点击啊,在中端中打开, 好,那这时候话我们就会进入到这样子的一个终端的一个控制台面板。那好,那现在话我们在这里话,我们就可以什么输入我们的 note 啊?就是这里话我们输入 note, 然后呢我们要运行,是吧?那戴某一这个 js 文件好, ok, 我们回撤一下,那在这里话我们就可以看到他最终就会什么运行这个内容,然后呢输出啊,控制来输出我们的这个期出来,对不对啊? ok, 那好,那这是我们的这个最基础的一个操作啊,运行, 那接着的话我们来讲一下这个我们 note 里面的这个 npn 包啊, npn, 那 npn 的话它是我们的一个 note 的一个包管理工具, 那也就说啊,这个 m m p m 包的这个包管理工具呢?它是啊在我们 no 的啊,就直接已经集成了,那所以的话我们在这里的话,我们是可以什么?比如说我们啊 no 的, 我们可以看到到我们的这个版本是十四,那如果你装好了的话,那么啊我们也可以是杠 mpn 杠 v 啊,我们去看一下 mpn 的一个这个包管理工具的一个版本,那就是六点幺四点五,那所以的话我们可以看到就是我们装好了 no 的话,他会自动帮我们把这个 mpn 包管理工具啊也装好。 好,那 n 天包是什么呢?他就是我们啊,就是我们比如说我们需要什么去下载别人啊已经写好的代码, 那么啊把这些代码下载到我们的本地来用,比如说啊,经常现在话就是很多啊人,我们会写一些什么我们的这个代码,对吧?那么我们会去把别人代码给他下载下来, 那这个包管理工具呢,就是可以帮助我们啊快速的把这些东西啊进行下载和进行一个管理, 比如说啊,我们现在的话就来啊简单的一个安装啊,就是我们比如说安装一个这个 expense 啊, 这个 s prince 呢,就是我们的一个服务器框架啊,服务器框架你有了它,那你就也就说你可以快速的去呃,运行起我们的服务起来,好吧,那非常的简单啊, 那在这里的话,我们啊想要安装它,因为我们这个 mpn 的话,它会什么自动的去找啊?这个包啊,它在相对应的这个官网的服务器啊,它是什么,它的什么地址,然后把它什么下载下来。 好,那由于 mpn 的话他默认是呢,是啊,就是走国外的服务器,那所以的话我们需要翻墙,有可能我们啊下载的不完全,或者是啊中断,那这时候话我们 一般会什么呢?一般我们会设置成我们的一个淘宝的一个镜像,所以的话啊,大家啊就是首先先把他的就是服务器啊,就设置成我们的淘宝,那这话有两种方式,第一种呢,就是我们可以安装啊,就是 cnpn 啊,就说这个淘宝专门设置的这个包管理工具啊,好,还有一种呢,就是直接把这个 npn 的他的这个啊,服务器的这个地址啊,那改成什么淘宝的这个镜像地址啊, 那么好,那比如说我们第一种方式就是嘛,就是改变啊这个 mpn 的一个地址啊,那 ok, 那就是这样子 啊,把它复制过来就可以了,就是啃肺啊,就是 mpn 啊,这个包配置啊,去设置什么我们的这个淘宝的镜像源啊,那这样的话我们就可以直接啊发 翻墙的去安装,那么还有一种方式呢,就是啊去安装,就是用这个 npn 包去安装什么呢?安装我们的淘宝镜像。 好啊,就是我们的这个 cnpm 包管理工具啊, ok, 那就是这一块杠狙啊, cnpm。 好,那这两种方式呢,都可以去帮助我们啊,快速的去啊,把需要下载的这些内容啊,这些包啊,快速的下载到,他就不需要去翻墙啊,从国外去下了,他就从我们的国内啊淘宝的这个服务器上啊去下。 好,那现在话,我们啊,就是这里的话,我们只需要配置一个就可以啊,就是根据自己一个需要,那比如说我们现在配置好 mpn 之后呢,我们就可以什么直接用 mpn 来进行一个安装啊,那比如说我们现在的话 就用 mpn 来安装什么呢?安装我们的这个 expense。 好, ok, 那我们就是嘛 mpa 啊, is stem 啊 expense。 好,然后呢我们这一块,比如说我需要全局安装啊,就是杠狙啊, 那么他就会安装在全局里面啊,比如说我们在各个啊这个下,就是各个文件里面,我们都可以什么去找到这个意思 plates, 因为他最终都会什么去全局里面去找这个包, 那么啊,如果你没有杠狙呢?他就安装在当前的这个目录里面,就是当前的这个 demo 这个目录里面,那安装在这里的话,那么啊全局里面就没有,如果你是会换一个目录,哎,祝你 啊,在其他的目录啊,在创建一个文件夹,然后呢你再运行的话,那么就找不到这个 spoints, 好吧,好,那现在话,比如说 我们现在话啊,就是啊,比如说啊来一次这个全局的安装好, 那么全局安装之后呢,你会发现他已经安装好了,但是呢我们在这里的话,你是看不到有任何内容的一个新增,对吧?啊?那如果你是啊不是全局安装的话,比如说啊 n p s step 好 experience 啊,就没有杠狙,没有杠狙的话他就会什么,你可以看到这里的话,等会他就会什么多一个 note models, 看到没有啊?多一个 note models, 那么这里的话就是依据我们的 expense 所需要的依赖 啊,把这些相对应的包啊都给你下一下来,你看这句话,我们就在这个 note modes 里面啊,就有相关的模块啊,就是 note 的模块,那这些模块什么?就是我们的 这个 expense 和我们 expense 所需要的依赖。那在这里的话,我们啊,比如说我们找啊,找这里啊,你看我们找到 expense, 是吧?你看这句话我们就找到 expense 了,那其他这些内容都是嘛? 根据 s prince 啊所需要的依赖啊,进行一个巴拉斯马,进行一个啊添加和加载, 我们啊前面全局安装的,那他又安装在什么地方呢?啊?那么我们在这里的话,我们就可以看到 呀,就是我们进入到我们的这个啊,这个我们的这个吸盘啊,就是我们的 user, 然后呢?找到我们的 a 四幺五四,然后呢我们在这里的话,我们可以看到这个有个什么 app dead, 是吧?啊? 用数据,那应用数据里面的话,我们的有这个容美,然后这里的话我们去找我们的这个 mpm。 好,那在这里的话,我们啊就是找到我们的 mm, 好,那你可以看到这一块有什么我们的这个 mm, 然后呢这一块就有我们相对应的 note models 啊,那我们点开在这里的话,我们可以看到这有个什么 expense, 那这就是我们安装好的 expense, 好, 那这里话就是我们全局安装的一个内容,那现在的话,我们啊,呃,全局安装,就是我们安装了这个内容之后,就是我们安装 spoints 之后呢, 那么我们啊肯定比如说我们需要去使用它,对不对?好,那这一会我们来创建第二个啊,比如说我们想要使用一下,我们看一下怎么去使用。好,那 其实也就说我们需要这个模块,对吧?需要这个 expense 模块,那么我们在这里的话,我们就可以去买 expense, 等于 require 啊,获取,获取什么 easy prince 就可以了啊,这就是我们的这个方式啊,获取模块好,然后呢我们比如说我们就想快速的搭建一个简单的服务器啊,那我们就可以再这样写啊,我们这里的话 lettapp 啊,等于什么 east prince。 好,那这个话我们创建好了之后呢,我们就可以,比如说我们啊这个服务器啊,我们的首页啊是什么,对吧? ok, 我们就是这个盖特啊,当当啊,他是一个方法,就是说,哎,首页啊,首页 好,然后呢?啊,这些话我们再传。这第一个呢是,我们就是啊首页啊,这个这个路径,然后呢?第二个呢?就是,哎,我们啊写一个什么匿名函数啊,那这些话我们就直接 写一个箭头函数,这箭头函数里面的话就有这两个参数啊,就阿一 q 和 is。 好,那我们就是说啊,就是有请求到首页的话,我们就是啊,响应就是用这个参数啊,干嘛呢? 返回啊,就是比如说我们散的啊,告诉他啊,这是老城打码首页。好吧,好,老城打码首页。 ok, 那就这么简单,然后呢?我们就什么直接运行一下啊?就是,哎,我们运行我们这个内容,好吧, ok, 我们就是 lisa。 好, 那这个话,我们啊,比如说我们要监听什么样的一个端口号?我们写上,比如说我们端监听一下这个端口号是,比如说是八零八零。 ok, 然后呢我们就写一个我们的这个箭头函数啊,就是, 哎,输出一下,说啊,这个我们这个监听已经启动起来了。好,那我们就是这里输出 好,比如说我们的这个服务器啊,已经启动啊,启动。 好,那这个地址是什么呢?我们就写一下啊,这个是我们的 htdp 啊, logo host, 好冒号啊,端口号,我们是什么?八零,八零,我们就写上八零。好, ok, 那就是我们的这个最简单的一个这个服啊,那这个话我们就需要用到什么第三方的这个包,对吧?啊?这个 expoints 这个框架啊,那我们就什么直接 请求过来。好,那现在我们要运行这个文件啊, demo too。 啊,那是嘛,就很简单,就是嘛, no 的 demo too 点着 s, ok, 那这时候我们起都请来,我们来看一下我们啊,进入首页是不是能够看到这个老城打码首页,哎,你看老城打码首页啊,就能够显示出来。好,那这样的话我们就搭建了一个非常简单的服务器,用我们的这个 s prince 框架。 好,那我们这一节课的话就给大家介绍了我们的这个 mpm 包的一个使用。啊, 那么我们通过这个啊,就可以安装我们的这个模块,是吧?好,然后通过我们啊,在我们代码里面通过 require 就可以将相对应的安装好的模块给他获取下来。

好的,观众朋友们,那么继续来讲 no 的 g s 的第四章 n p m e sto 的原理。好,那首先第一点呢,本章所有知识呢,全部都是很重要的。 那第二点,你如果学会本章所有的知识,那你就可以迈向中级或者是高级程序的一个殿堂。那第三点,我将没有任何废话的去讲本章所有知识,因为非常非常重要。 好,那我们来看啊,在执行 n p m minstle 的时候,它到底发生了什么?好,那这个命令就不再多讲了啊,上一章已经讲过了,没看过的去上一章看一下。好,那执行完这个命令,比如说安装这个 v u e 这个模块儿,或者是别的模块儿, 它是不是会在我们的根部录下面存放一个 note modules? 注意,存放这个 note modules 的时候使用是扁平化的方式去安装。那扁平化什么意思?我们一会会详细的介, 并且呢,他还有一个排序的规则,注意看点,并就是点开头的,他是排在这个最前面的,然后接下来呢是这种 it 开头的,然后呢才是我们这个首字母排序,注意,他是这么一个规则,就是 abcdefg 这种首字母排序,对,他采用了这种规则。 好,我们直接说了,他是使用这个扁平化的方式去安装,那扁平化他是怎么去做的呢?注意啊,他是使用一个 广度优先的一个算法,不是深度优先啊,广度优先呢,就非常适合去下载这个依赖啊,在便利依赖数的时候呢, 他首先会处理我们这个根部下面所有的依赖,然后呢再去逐层的去处理每一个依赖包里边依赖,因为这个依赖呢,他还会有别的依赖,比如说 vue 里边呢,他可能依赖一些别的, 我们可以来看一下哦。 v u e 这个 peg 的 jason 啊,往下翻,对吧?你看它又依赖这四个包,这四个包呢,又有可能依赖别的,比如说这个 compire, s f c, 我们来找一下, 对吧? s f c, 你看它有可能又依赖别的,你看它又依赖这么多,所以说依赖的下面呢,还是有依赖,所以说它使用的是广度优先的算法去处理和下载我们这个依赖的。 好,那现在的话,你就应该了解了他这个扁平化的一个思路,以及他的一个算法,那么他真的是一个扁平化的吗?其实并不是啊,对,所以说我加了一个问号, 扁平化只是理想状态下。好,我们来看这张图啊,比如说这个 app 呢,就是我们这个项目,然后这个项目呢用到两个模块。好,这儿的话用 v u e 和 react 去举例啊, a 就是 v u e, b 就是 reaction, 然后 c 呢,可以把它看成一个 bable, 对吧?他们俩呢,都用到一个 babe 了,对吧?那版本和名字都是一样的,所以说他就直接会把这个 babe 呢提到这个相同等级的一个依赖了,也就是 贴到一级模块下面的。所以说 a 和 b 呢,就可以去复用这个 c 模块了,而不是去给 a 呢装一边这个 cb 呢,装一边这个 c, 这样的话就可以节省我们这个空间啊,那这个的话就是一个理想状态下的一个扁平化啊,对,他就把这个 c 模块呢,就扁平到我们这个一级模块下面呢,他们两个直接就复用了啊,那如果出现这种情况怎么办呢?我们继续来看啊,比如说 a a 是这个 v u e, b 是 react, 他们俩呢,依赖的 bib 的版本是不一样的,比如说 v u e 依赖是一的 二零,而 rec 呢,需要是二点零,那这时候他就不可能去做这个扁平化了,那扁平化的话,那会有问题啊,他就不知道我到底该用一点零还是用二点零,所以说出现这种情况的话,他就会单独的去安装,一来也就是 b 下面呢,还会去创建一个 note modules, 然后这个 note modules 呢,再去存放这个 c 模块儿。所以说不理想的状态下呢,他是还会有这种模块儿勇于的现象啊,对,这种现象还是有的,所以说面试的时候一定要把这个说清楚啊。 好,然后我们继续来看 m p m mistle 后续的一个流程啊。对,我们刚才讲的是这个 m p m mistle 如何去安装这个 note modules, 也就是最后一步啊,我们来看它的前几步啊,前面的步骤也是非常非常多的,一定要把我这张图去看一下,多理解一下。 好,我们点开来看一下啊。首先我们执行这个命令,执行完这个命令他去干什么呢?去检查这个 config。 这 config 怎么去检查?我上一章已经教过了啊,通过 n p m config list。 好,我们再来看一下啊。 哦,他就会去检查这个 config 里边的文件,注意这个文件呢是有先后顺序的,注意看啊,他呢先会去找什么项目级别的 n p m r c 的一个配置文件。哦,这的话我也给大家做了一个例子啊, 对,我在根部的下面新建了一个 n p m r c, 那这个就是项目级的,那这个 n p m r c 可以做什么呢?其实就跟我们扛费的配置是一样的,你看可以配置原配置代理,是吧? 配置 h t t p s 的代理,配置 h t t p s 的一个证书,对吧?其实就跟我们考费的配置是一样的,只不过他能有一个配置文件在这儿去编写。 对,然后这个例子呢,我已经给大家去放到这个博客上面了,大家可以去看一下。对,其实跟那个 coffee 就是一样的,所以说他先会去我们这个 当前项目下面去找一下有没有点 n p m r c, 如果找不到的话,他就会去哪找呢?注意看啊,他就会去用户级的 n p m r c 去看你有没有去配置过的。这个文件是默认的给你存放到这个用户盘下面的,我们来找一下啊,我的电脑 c 盘用户,那这就是我的账号啊,幺幺九五五,然后去下面找一找。哎,你就会发现这里边是不是有个点 n p m r c, 那这个的话 就是对应我们这个用户级的 n p m r c。 哦,然后我们再看啊,如果用户级的你没有什么更改,他就会去找什么全局级的,那全局级的就在这个 c 盘下面的 a p p data 下面的 n p m 下面点 n p m r c, 那这个是对应这个全局级的啊,如果你全局级的也没有做过任何什么修改,他就会去找 n p m 内置的 n p m r c。 啊,那这个的话就需要去找你这个 note gs 装到哪了?我回一下我的 note gs 应该是 f 盘里边,然后我找找啊, 找一下那个 g s, 然后这个,那么就是,然后 n p m, 然后你会发现这有个点儿 n p m n p m r c, 那这个就是 n p m 内置的一个 n p m r c, 所以说它是遵循这么一条路的啊,然后找完之后它就去 干什么呢?找完之后呢,他就去检查有没有拍个 look 点 jason 就是这个文件啊,对,这个文件。哦,那这个其实就像做任务一样啊。好,我们把每条线路都给大家去走一下,比如说有 这有的话怎么办呢?有的话注意啊,他要比较 packaged jison 和 packaged look, 但是 jason 版本一样不一样,比如说 packaged jason, 我有一个 v u e, 我是三,但是 packaged look 我是二, 那这样的话就怎么样?不一致,这不一致的话就走下面这个分支啊。注意,这是一道面试题啊,非常重要啊, 如果不一致的话,并且是 n p m 高版本,我们现在基本都是 n p m 高版本,它呢会根据 package jason 的版本号去下载,并且呢,下载完成之后去更新 lock 文件啊,注意,如果这两 两个版本号不一样,是优先于拍给这节省的,然后再去把 lock 文件去给他更新一下。哦,这个一定要记住啊。哦,如果一致的话会怎么样?如果一致的话,他就去检查有没有缓存过,也就是之前有没有安装过这个模块, 如果有的话,那就直接把这个模块给你截到那的 models 里边了,就不去。呃,在这个网上去给你下载了,就节省这个网络资源了,所以说直接给你拿过来了, 如果没有怎么办呢?没有的话,他要去 n p m 的这个官网上,在他的定向语言上面去下载这个资源包, 然后要检查它的完整性,然后呢去给你添加到这个缓存里边,然后呢去更新 lock 文件,然后最后才给你解压到这个 note models 里边。好,我们再来看啊,如果没有拍个这 lock 点儿接损会怎么办呢?首先他要获取这个包 的信息,然后去构建依赖数,注意构建依赖数跟扁平化呢,他俩是一块去进行操作的。然后呢再去检查有没有缓存好,那后面的步骤呢?其实就是一样的,所以说大家把这个图给他理解了就好了,其实也是非常简单。好, 那 n p m r c。 对,我已经贴到这了,大家去看一下就可以了。完了最后一个指示点就是拍个这 look 点。 jason, 那这个文件很多朋友呢,他只知道这个东西只是锁定一些版本号,就是记录我们这个依赖数的详细信息啊,对,我们其实可以看一下。 好,我们会发现啊,首先第一个这个 package 呢,就是我们这个 package 接头的描述信息,就是一个简化版的,其实跟它是一辆一样的。对,比如说我们装了 m d 五呢,还有这个 v u e。 好,那这一些呢?其实就是扁平的一些模块化,就是比如说这个应该是呃, 优异里边的一些依赖,用了这个 bable。 好,我们来解析一下它里边的每一个参数啊,那 watch 的话什么意思呢? watching 的话就是代表这个 bable pass 它的一个版本号,还有这个 resolve 的,那这个话就一个什么下载地址嘛, 还有这个 integrity, 那这个的话什么检查这个包完整性的一串哈锡纸啊,还有这个 dv 是什么? dv? 就是是否是开发依赖。 对,我们把这个什么对 v u e, 你看创造了 d v dependic, 所以说它为处啊,还有并是什么,并说明它有一个可执行文件,这个后面会详细讲的非常有用。 还有这个 n g, n g 说明什么?说明我们要使用这个模块弄的版本呢,必须要大于等于六点零的版本才可以。对,我们现在一般都会使用十六或者十八,所以说一般是很少有这些问题。 好,那这些的话可能都是大家所知道的,其实我讲的并不是这些啊,其实缓存呢,是由 package locker 接生帮我们去做的。他是怎么做的?注意知识点来了啊,认真听好,他是通过 integrity, 然后加上我省,加上他的内, 会去生成一个唯一的一个 key。 啊,好,那这个 key 它对应的是哪呢?你可以使用我们之前讲过的 npm config list, 好,去查一下它这个缓存文件是在哪。对,我的缓存文件是在 f 盘下面的这个 m p m catch, 对,是在这儿。 好,然后我们就去找一下。啊。对,你看这个 mini 我说了非常有用啊,就是 n p m f 端下 咱们,咱们先不 cat 好,就是下划线 cat 这个文件里边好,它所对应的就是这个缓存文件里边的 index 杠 v 五,也就是一个,所以目录。对,这个目录呢,其实就是记录的 contex vr 的一个所以的一个位置啊, 这个位置呢,就是对应的这个 integrity 加上 watching, 加上他的名字的一个哈西值,如果能对上对他们三个呢,会用一个算法,如果能对上的话,他就会去 contex v 二去找到你缓存的那个文件。比如说举个例子, 对,他就是一个哈锡纸的一个二进制包,然后如果能对上的话,他就会把这个二进制包呢去给你解压出来,其实就是一个 note models, 然后呢直接去给你放到这边的一个 note models, 它的缓存的原理呢?其实就是这样子。好,那以上的话就是本节课所有知识啊。

转换器的使用,首先进到产品登记,基本选择多个转换器,多个转换器打开之后呢?然后有一个开口创建,你选择这个 开口创建,选择开始开始,然后这里选择这个文件,一般那个呃用 cam 软件导出来的软件呢?这个呃乘二的话,它是一个呃走线图,它是一个走线布局图, 一般选择成三,成三的话是他那个焊接图,所以我们选择成三。选择成三以后呢,点击下一步,然后这里显示坐标显示,让他把所有的坐标显示出来,这里都是选择绿色的,是正常的,然后坐标显示完成,点击下 下一步,然后这里会显示他说里面有圆形、方形。什么东西,这里有定义的啊,然后这里有具体的定义的,然后定义完成以后,然后这里选择执行, 然后启动胳膊数据分析,点击确定,然后这里他会计算总共有多少焊盘,然后刚往开口等等一系列的数据,然后这里启动完毕以后点击确定,然后确定以后呢? 然后这里要进行数据的翻转,他这里翻转的时候呢,要先进行那个呃 先进行左右,先进行左右翻转,然后再进行上下翻转,然后这样的话他才能对齐,否则的话还有一个就是这个 小的这个对不起,所以要先进行左右,再进行上下,然后这个完成翻转以后呢进行关闭, 然后这边选择确定,确定的话,然后这里我们可以看能看到把这个图形放大以后,然后呃我们移动,让他重合,这里点击呃元器键,点击移动,移动的话可以让他这个 呃移动当中的颜色是绿色,然后和这个,呃他的钢网开孔进行重合, 然后到这里去重合,那重合的话就是我们要把这个元器件给他,给他那个绑定在哪里,就是说这个这个图形给他绑定,就是我们把他重合之后呢要 移动的重合呢?嗯,我们把它移动要和这个字符要进行重合,就相当于是这样的一个重合状态,然后他这里就完全重合了。重合这里选择选择一个,然后进行切装元气垫位置的 包定,然后这样就确定,然后确定完成了以后呢,就是这里让你选择这个基板,他现在同时基板外框都是这种选定了,选定了以后,这个点击执行, 然后设置七版区域的话,这里已经设置好了,然后确定,然后确定那个设置七版区域完成啊,有没有不要的图形要进行删除啊?然后我们可以看一下有不要的图形可以把它删掉 啊,比如说像这些不要的图形,那我们就是区域内删除,区域内删除,然后这些是不要的啊,然后选择区域内删除就不要的图形,就把它删掉, 就把不要的不要的都删除掉以后,然后点击呃下一步, 然后这里进行关联,我们可以看到他的现在还没有关联结果,但是他的坐标数据啊,都有,有几个他的开口啊,可以看到他识别出来的开口形状啊,然后都识别出来了开口,然后马克 脸是没有的,其他的全都识别出来了,他的开口送就是一个元气垫有两个孔或者三个孔的开口,然后他开了几个孔,有的是开三个孔,有的开四个孔,然后这个是他用到的元气垫,然后这两个是马卡点,所以我们实时关联, 实时关联完成以后,这里就变成那个这个关联的颜色,是这个颜色可以看到全部关联成功,关联成功的话,那我们可以看到就是说, 呃,他说有一个重复了,有些开口幕被重复了,我们办了,我们实时关联成功以后选择关闭啊,选择关闭这里就选择试试保存,然后关联信息刷新,然后确定,因为这里角度都是对的,不存在的断角可以点击确定, 这样的话就关联成功了,关联成功直接进行。呃,这里可以看到他关联成功了,然后进行参数的角度设置,不需要设置,只要进到那个 apc 的设置,我们直接点下一步, apc 不存在角度,点击下一步,然后所以就是说他这里不存在角度的话,就直接直接就是与下一步 apc 设定了,我们就点击 apc, 然后 a、 b、 c 的话,设定完了以后有一些基本单位啊,贴装点单位啊,然后还有焊接数据这些,嗯,然后我们可以看到 就是这里可以设定一下就是 apc 的一些数据,然后我们没有 apc 的话,就不需要设置,然后切装点的单位啊,然后这里是一些切装点的信 啊,然后我们可以看到一些卸妆点的一些状况,那这里不需要设定,然后这个是焊料的,焊料的一些数据啊,焊料的数据我们也不需要,不需要设定啊,然后我们就 直接点击下一步,点击下一步,现在保存了刷新是不是要创建继续选择?是, 然后请在 ptb 编辑菜单里保存文件,点确定,然后这样的话他就自动在 ptb 文件里面生成了钢网的文件,然后这样的话就是可以提示你,然后在这里啊做一个比对啊,整个的过程就是这样的。

这个视频将彻底颠覆你对 n p m 的认知。接下来我将提出一个疑问,首先我们来看啊, n p m, 它是 note g s 的包管理规范,入口文件是 park a 级连接审好。 ok, 那接下来我们来看一下啊,这是 wait 的一个 hello word 的项目,我们在第一行代码里面去引入了一个 react 的模块。 好, ok, 那接下来问题来了啊,首先我们确认 es 六 model, 它是浏览器原生知识的。好,那第二点, 在 vit 中以下代码它是可以运行的,通过 es 六 model 的形式去加载的 react 对不对?那 react 它也肯定是来源于 note 的 models 中的依赖,我们的项目肯定是可以跑的。所以接下来问题来了, 难道 e s 六 model 在浏览器中可以直接读取你项目中的 note models 的模块吗?那如果读不了,那这一行代码肯定不能。 所以我能否认为浏览器居然支持 n p m? 好好想想这个问题,把视频暂停好,接下来我们来看啊,其实这个问题非常的简单,我们直接来看网络请求,我们可以看到啊,我们加载的资源全部都有一个前缀, local horse 的五幺七三,包括你看 这个资源,他居然后面还跟上了 note 摸六十。那这个时候你会更加疑惑,我浏览器怎么能加载 note 摸六十啊?那是不是官方文档错了呀? npm 只支持什么 note 环境? 实际上啊,这个问题非常简单,因为我们的 vit 在本地使用 note gs 帮我们在五幺七三这个端口启动了一个静态资源服务。所以实际上 文件访问能力是谁提供的呀?是 note g s 提供的,所以我们就破案了啊,文件访问在 wait 中,它是 note g s 提供的,所以 n p m 它依然是 漏的。驾驶环境的包管理工具,你的世界没有崩塌啊,别慌。好,我们再来看 c n n p m 啊。那实际上啊,它和 n p m 的主要区别就是安装的远不一样,因为 n p m 它在国外可能下载慢啊,所以淘宝就自己搞了一套, 基本上差不多的,只是说 c n p m, 据我目前的了解,它好像没有提供 pack a 以及杠 log 点阶层这个文件的支持,就是没有去锁版本。 我们再来看亚亚的话,实际上在目前的一个情况下,和 n p m 已经非常接近了。你看,比如说以前亚,他号称支持离线,支持扁平化,速度非常快,其实 n p m 也慢慢的都支持上了。所以说现在的新版本的 n p m 和亚基本上是差不多的,包括这个亚点洛克,实际上和 park e g 洛克连杰省解决的问题也是差不多的 啊。我们再来看这个扁平化,我不知道有没有老一点的前端,以前经常在 windows 下面,你的项目跑不起来,就是因为这个 note 摸六是层级欠套太深,但是这个问题现在已经不 存在啊,已经解决了。好,接下来我们再来看 p n p m 那 p n p m 它和前面的一些包管理工具有一些比较大的区别。首先是第一个啊,它利用了操作系统的软链接技术来提升性能。那什么是软链接呢?你就可以理解为你给一个文件创建的一个快捷方式,所以说呢,它可以 首先节省磁盘的空间。第二个呢,下载非常的快啊。第二个就是 p m m n p m。 它还有一个招牌的功能啊,它支持 model rap。 比如说你的一个项目中引入了另一个团队在维护的组建库啊,就可以考虑去选择这种方案。但是他也有缺陷啊,他会增加你项目依赖的一个复杂度。如果说你对这个玩意不是足够了解的情况下,我不推荐去使用啊, 否则你的项目将崩盘啊。好,所以我们总结一下啊,你正常的项目就 n p m 二选一就好。你如果说有 model rap 的这个需求,可以考虑 p n p m 啊,有收获就点个关注啊。