uTorrent web怎么用

crown 浏览器可以用来做我们编程的 id e 吗？答案是可以的。那么我们 f 十二来到这个 crom 的开发者工具，然后选择这个 souces 面板，然后在这个面板下面呢，我们可以选择 file system 这样一个标签，然后点击下边的这个加号， 然后在我们本地磁盘上找到我们项目的这个目录，然后进行选择，添加到我们的这个 开发者工具里边来。那么现在呢，我们就可以在这进行代码的编写了，那么我们对这个项目代码的编写会实时的给我们同步到磁盘上，比如说我在这把这一行 输出 hello 一的代码，我改成 hello 二，然后保存，然后再刷新好，大家就可以看到，那么那么这个地方呢，这个 hello 二就被输出出 来了，那就说明我们的编辑是成功的，那么呃，除了能够编辑这个 实时的编辑这个 h 七码，然后还有 gs 代码，那么他还有一个更强大的功能，就是允许我们在这个元素面板里面来对这个样式进行实时的编辑，在这呢，我把这个啊，我把这个背景色啊，我给他改成红色， 嗯，这个大红色的背景，睁大眼睛，然后啊我们来到这个，我们来到原代码这，然后找到这个样式， 好，可以看到这个样式就成功的被改为红色了，是吧？那么我们也可以啊，我们也可以改他其他的属性，比如说我们把这个，我们把这个字体颜色啊，字体颜色改成啊，改成绿色， 好，那此时呢，我们就可以看到这个字体颜色就被成功的改成绿色了。 好的，那这就是我今天要给大家分享的所有内容，如果大家觉得我的视频对你有所帮助，千万不要忘了三点，谢谢大家。

今天记录一下咱们 atml 里面各种元素的显示方式，那主要分为三种，第一种是会计元素，第二种是行内块， 第三种是行内元素。那我已经准备了三种元素，第一个 div， 它是快捷元素。第二个此盼，它是行内元素。第三个 img 是 咱们的行内快捷元素。那去页面上去看一下。首先咱们打开调试工具， 咱们用这个箭头选中咱们的 div， 看一下咱们的 div， div 是 阔极元素，它默认是占满整个盒子的宽度的。第二个是实判，它的宽高是和咱们里面的内容相匹配的。 第三个是图片，图片是默认是图片多大，咱们这个元素就是多大的，这个就是行内块。然后他们的特性是什么呢？咱们的阔极元素咱们是可以设置他的宽高的，高度给两百， 宽度给两百，高度给两百，然后给他一个背景颜色， pink 粉色， 然后看一下刷新，那这两个盒子是有宽高的，然后咱们的行内元素是不能设置宽高的，演示一下宽一百，高一百，看一下刷新，他是没有任何变化的。然后咱们看一下， 看选中这个 s 盘之后，它的宽是八十三点三五，高是二十二点五，并没有按照咱们设置的要求变成一百乘一百。 然后咱们的行内块也是可以设置宽高的，刷新，那它就缩小了。

周末整理了一下 react 整个生态，目前在企业里面比较流行的一些技术选型， 从创建项目，我们更多的是 cia， red， red app， 如果是服务端渲染的项目，那么我们的选型是 next gs。 现在又流行起来问特，那么这个里面也有一些建议，建议使用问特创建 red 口端应用，包括一些相应的阅读的文档啊。 现在的状态管理，流行的 red 内部内置了 house 的这种状态的管理，包括用 redis 做管理。目前企业内部呃用的比较多的状态管理， mobos 拉 style 这个也用的比较多，也整理了相应的一些资料。 文档里我也给了一些状态的选型的建议，可以根据自己的业务做选型，再到路由的管理。咱们都知道这是 red 啊，项目当中样式的管理啊，用 c s e g s 这种方案还是用 c s model 的方案，还是用 style company 式的方案？ 目前用的比较多的是春问的 css， 也给了一些选型的建议，再到组建库， 按照底站， acu 底站，这是国内用的比较多的，还有一些动画库，包括可视化的图标，像 ontov。 项目当中如果你用表单的话，可以使用 red hooks form 类型的检查，比较流行的就是 t s 再到代码风格，那么 print 加 e i link 一层 a i b e b 的样式的指南，再到数据的结构，可以试一下 a 模特库， 国际化的选型，再到副文本编辑框时间的处理。客户端的选型是用托瑞还是 electro 移动端，如果大家需要的话，可以评论区留言。

我们再来看今天的主角，我现在要给大家介绍的就是 c s n g s， 这个是 model， c s c s n g s 呢？我们来一个 button 组件， button 组件是平常同学们用的最多的啊，我们之前其实统计了一下，大概最多的 model 框架是不是自己内部使用的。不是啊，这个这种方案开源的都有啊，非常一个非常成熟的方案， 只要有翻译器能够解决这个问题，解决它的这个啊，内蒙追加啊，或者什么其他问题其实都能够解决，这就是 cs module， 你 或者你可以如果说用的 vt 的 话，你可以用 vt 来搜一下 vt module cs， 然后点进去，这个里面就是 vt 的 一些特性，特性里面你就可以看到 cs module， 那 这里呢？有这么多，有 post， cs， cs module 点进去就是它约定俗成的一种方案，就是要用 mosuo 点 cs 来命名文件啊，它一定要用这个来命名，注意哦， 它这样命名之后它就会给你做一部分翻译啊，你自己在这里面去处理好这个，我们先给大家看到这包括这个 cs 样式呢，预处理，预处理，其实就同学们之前说的什么 s， s， l s 啊这些方案，这个我们现在其实用的不多了，可能同学们用的比较多吧。 好，我们现在再来看到 button， button 呢，可能会有一个入口，这个入口就是 index 点 t s button， 朋友们主要是看思维啊，至于是 react 还是 view， 这个一点都不重要。好，现在就有了一个按钮，按钮呢，你待会儿里面肯定要写东西，写一个什么文字啊之类的，所以我们现在肯定要给它定一个 button props， 好类型呢， children 给它放进去，再然后这里来去接收 props， button props 就 定义好了。好，这个时候呢，其实一般像变体啊，那些呢？那还有很多，这个时候我们需要把变体也给它定义一下，比如说 button types， 或者叫 button variable。 呃，这个 variable 或者 variable 定义一下，它是一个数值，里面有哪些呢？可能有 primary secondary 或者是这个，呃， ghost。 好，这就是同学们平常啊用的比较多的几个形态，比如说主按钮，次按钮和这种阴灵幽灵按钮，对吧？然后呢我们就可以定义它的 button types 了啊， button types 就 等于它 就 ok 了，然后你再把 type 给它放进去啊，这些都是一些技巧啊，都是一些技巧。然后你再来看它是不是 primary secondary ghost， 对 吧？它其实是取自于这个数组，然后数组的类型呢，是从这个里面去把它拿出来的，这样就有个好处，你的这个就相当于是个酶聚酯。 美曲值是可以使用的啊，就跟你写那个美曲是一样的 e number。 primary secondary 和 ghost 跟你写的这个是一样的 e number， 呃，或者叫 button types， 对 吧？一样的啊，一样的效果好，这个是拓展的一点点，我们只像只说到这儿，然后呢，我们在这个里面继续往里面去添加内容， 既然 props 来的有个 children， 我 们就把 children 给它传进去，其他的我们都不需要了啊，其他都不需要，这个呢，我们也给它导出去 export 出去，现在呢就可以使用了，我们在使用的地方引入一下，比如说我们现在要在这儿使用，那就把 button 引入一下，然后呢使用 type primary， 这个时候就能够看到效果了。但是呢，你发现现在看到这个效果 是用我们外面的那些样式影响的，我现在把外面的这些样式呢全部去掉，就比如这个 button button， 我是 绝对不会要它的，还有其他的这个多余的样式呢，我想把它删掉。好，现在就正常了，是一个普通的原始按钮，在这个基础上，我们用 cs ing 的 方案。怎么来解决样式的问题呢？ 大家注意看了 import， 从它里面导进来这个 style。 好， 我不知道前面大家还记不记得我之前给大家讲过一个，就公开课的时候讲过模板语法， 模板语法就是 c s， n g s 的 基础，什么基础呢？接下来我们比如说 const button， 或者叫 s c button， s c 叉 button。 啊，这这个命名是我们的一个，呃，约定啊。 好，这个就是模板语法的方式，模板语法的方式来去定义，定义好之后，这里就会输出一个新的组建，把这个组建往这儿一丢，就完成了，就写完了。你接下来样式呢？全部在这个里面去写，比如说你写什么呢？写 color， blue 或者是 white， 保存过来看一下 color 是 不是变成了 blue。 如果你的 body， 呃，这个 border 不要，那就直接来一个 border long， 它就没有 border 了。好，你如果要给它 padding， 那 就给 padding， padding 八像素十六像素，这就有 padding 了。好，你要有圆角，圆角呢就给个 border radius， 圆角就有了四像素，或者给个八像素。 好，这样就有了，大家可以看到吧。呃，如果说它是这个主按钮的话，那我们一般它的 background color 呢？可能需要给一个黑色，对吧？我们一般一般的黑可能是呃三八三八三八，比如说给个这个颜色， 嗯，这这样，这是有点灰，我们给个零三零三零三吧，零三零三， color 呢，一般肯定就要跟它对应的给成白色 f 灰，白一点点的啊， f 二， f 二， f 二啊，就这个样效果，那这个按钮就 ok 了啊，这个按钮就 ok 了，那你现在可能在他基础上去写一些变体，对吧？要实现一些变体，那些变体呢，你就额外再通过样式去控制就可以了。好，但是这肯定不是完美的方案，为什么呢？这个， 这个这几个它们其实都是颜色值，这个颜色值在最初你定义的时候，就应该在这个里面把它的颜色值的内容呢给它定义好，所以我们冒号 root 下面通常全部用来去定义它的变量， 整个色值体系。我们来给大家看一下啊，假设我现在呢要定义一些这个基础样式的体系值啊， 什么呢？比如说颜色，还有呃间距大小等等，我们一个一个来定义，刚才前面说了，我们有一个 color primary， 给，就给这个颜色，好，这是我们的主题色，大家注意了。然后呢，可能还有 color 杠 b 七杠 primary， 我们就给这个颜色好，我们来试一下啊，当我这两个颜色定义好之后，我现在就可以去那边用它了，就刚才我这里定义的，这其实就是颜色的央视体体系里面方案的混用啊，方案的混用好，颜色朋友们看到吧，就用它，那背景色呢？ 背景色我就用它 color 杠 primary， 杠 bg 啊， bg 杠 primary， ok， 过来看一下，那就是这个效果。那一般情况下呢，其实在这个基础上它还会有更深一层的定义，比如说针对于对应业务或者是对应组建，它会有额外的定义，组建定义的它的设置定义 啊，这些呢全部定在这个下面，包括字体、间距，字体我们就给这个吧。呃，间距呢？刚刚 gap， 这个 gap 给他一个一点五，然后可能还有 margin， 就是 编剧啊，比如说还有其他的编剧 margin 给个零，或者给个正常情况下的设置，比如给个八八吧，八像素， 好， padding， 这个把它变成 padding， 这样来去指定 padding 的 话，我们一般给个四像素，但是 padding 也随着你的本身本体的那个大小来去切换，来去变化的。 好好，这样定义之后呢，我们再来到这边，那其实你的这个 borderless 或者是 petting 这个地方，你就能够更规范地去用你的变量值来解决。变量值怎么解决呢？你的 petting 嘛，对吧？那你这儿就是把它变成两个沃尔，刚刚 petting， 然后呢？刚刚 petting， 呐， 这样来，那来一看就有了。那其实一般情况下啊，你在这里去使用的时候呢啊，我这里写多了， 嗯，好，这个样子就看到。那如果说你在这个基础上想给它把它的大小，或者根据它按钮的大小要能够去切换， 能够去切换。所以你这里呢，可以比如说把它变成 lg 啊，变成叉 s， 变成 lg， 变成叉 l， 变成叉叉 l， 变成叉叉叉 l 等等等啊，这个就随便你自己怎么去定义去约束了啊，所以呢，这几个技术之间它并不是独立的啊，自己有一些方案呢，它可能是需要共同一起来用才能够解决掉某一些问题。那比如说像这个 bug 按钮的问题， 央视体系在设计的时候啊，就需要去考虑到色值相关的内容呢，直接用 cs 变量。所以为什么我前面就说到现在已经不是那么推荐大家用那个，那个， 呃，就 ness 或者是 sass 啊，不太推荐。好吧，就是用这种方案。好，那我们可以看到呢，这个基本定义就完成了啊，一个按钮，如果说你想把它的大小也给它定义一下，比如说这里的 size 来个 size size 给 small， medium， large 这几个呢，同样可以按照它的这个方式来去定义， express， const， uh size， sizes 等于这几个啊，然后呢，你在它的类型定义的时候呢， type， button size 就 直接这样去定义，然后你下面用的时候也直接这样去用 sizes 就 可以了啊，你点上去 small， medium 和 large， 这个时候你里面在用的时候呢，就可以去按看情况，对吧？比如说你现在给他一个 size， 这个 size 呢，他会传过去，传给谁呢？传给他到这儿你来 size 就得到它的大小，那比如说你把这个 size 呢，当然要放在上面一点，把这个放在下面来。好，那你的 size 就是 sizes 得了 sizes 得了 sizes 之后传进去，你给的大小是多少啊？ props 点 size。 那 我现在在外面在用的时候呢，你看它就可以切换了，比如说现在的 size， 我 们给它一个 large， 然后你里面去消费，现在还没有消费啊，消费一下它的大小 怎么消费呢？就直接比如说在这里把代码写进去，这样来去消费，得到结果啊，我们最终呢在外层来包一下，里面的这个呢，写多了好， return css， return css 好，这个里面呢就可以去指定了，你看 finalize 或者是宽高，对吧？宽度呢，你也可以根据你的宽度去加那个 size 来决定，高度呢，也可以用高度跟那个 size， 但是一般情况下这个地方还是由 padding 来决定的。 padding 来决定啊， padding 杠 size， 那 我们现在呢，在那边去指定的时候就可以把 padding 带一个 size， 这是常规的 padding。 如果是针对于大的 padding， 我 们给给它一个 large， 比如说十六，还可以给他一个常规的 small， 给个八，然后再给一个其他的啊， petting charlage， charlage， 我 们就这个就没有了啊， charlage， 这个就没有了。呃，我们再看下这边啊，还有哪几个 small media 和 large， 我 们把 media 给给定一下， petting 杠 media 十二，好，这样来，那我那边呢，你给多少，它就可以来多少，你看现在我给的是 large 吧，那如果说我现在变变化一下，不再是 large， 而是 media media 保存，它变小了吧，它的 padding 变小了啊，这个可能大家看不清，我把颜色给大家重新指定一下。呃，这个颜色呢，我们假设就直接用 零八，零八零八吧。啊，这样就看得更清楚一点。哦，我说错了，是它零八零八零八，然后这个呢，有一个 f 九， f 九这样子，嗯，这个看的就很清楚了，这是 media， 那 如果我是 large 呢？我把它变化一下，把它变成 large， 好，就可以看到了，这个是 large， 如果我现在再切一下，再切一下啊，比如说切成那个 small 啊， small， 你 看它就变得这么小了 啊，就变得这么小了。所以真正你在做这个样式体系设计和组建库，或者组建设计的时候，一定要再用这种思维去考虑啊，一定用这种思维去考虑 set component 是 cs ingest 的 一种解决方案啊，然后这个猫九点 cs 呢，是 cs 猫九的方案哇，这几个呢，是刚才给大家用一个简单例子给大家举例说明的，你正常情况下在自己去架构一个项目的时候呢，就从这些点来去考虑啊。刚才以写一个 header 和写一个按钮给大家演示了 不同的方案是什么样子的啊？好，这个呢，我们就先给大家介绍这么多啊，差不多基本上把这个大致的内容呢，大家都有一个基本印象了啊，都看了一眼，有个基本印象。那我们来看， 我们刚才在编辑这个代码的时候呢，大家可以发现写的 cs 样式啊，这些内容其实还是比较多的，对吧？那能不能够简化，就说我不写 cs 样式，或者我写很简单的 cs 样式就能够实现 这个基本的。呃，常规的这些业务需求和样式呢？当然可以，这个其实就是 tailwind。