浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2023, March 22, 1:30 PM
在使用webpack或者vue-service-cli 的时候，启动时出现：“0308010c:digital envelope routines::unsupported” 的错误，这时候应该怎么解决呢？
这个错误的原因可能有两个：
1、 你没有使用 Node JS 的 LTS（长期支持）版本或者是版本太新了。我现在我使用的是 Node 18.0.0。所以我直接npm -g add n ，安装了一个多版本的管理工具，切到16后正常了
2、将 --openssl-legacy-provider 传递给 Webpack 或 CLI 工具 例如，在 React 应用程序中，你可以将 --openssl-legacy-provider 传递给启动脚本，如 "react-scripts --openssl-legacy-provider start"。
2是网上查的资料，因为我1就直接解决了，所以2没用上，如果你方法1没有解决问题，那可以尝试方法2
Javascript | 评论:0
| 阅读:2373
Submitted by gouki on 2023, March 15, 10:01 AM
虽然已经知道所谓的：在vue中，两个不同的组件，A加了层级或者A的子元素加了层级（大于1），B没加，不管B的子元素层级有多高都不会再A上面显示。
但发现不管怎么调整，下拉框还是被其他组件覆盖了，这时候我才注意到有一个sticky的样式。为了让这个元素能够留在顶部，结果就出现了样式穿透的问题了。记录一下下次再遇到的时候，也好加深一下记忆
参考：
1、https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/ ，杀了个回马枪，还是说说position:sticky吧
Javascript | 评论:0
| 阅读:2507
Submitted by gouki on 2023, January 7, 10:36 AM
require这玩意不属于vite的功能，也不是vue的功能，我没有用webpack，所以无法直接用require。
但因为参考的项目用了require.context的遍历，所以就在想应该怎么弄呢。查了一下资料，发现vite有提供现成的：import.meta.glob，用法和 require.context差不多。
原来的代码： const requireModules = require.context('./modules/', true, /index\.(ts|js)$/iu)
修改后的代码：const requireModules = import.meta.glob('./modules/*/index.(ts|js)')
只是原来requireModules还是一个function，而修改后的是一个Object，因此遍历的代码就要再改一下，比如原来可以直接requireModules.keys()，现在只能用Object.keys(requireModules)。
至此，修改完毕。
Javascript | 评论:0
| 阅读:2063
Submitted by gouki on 2022, November 15, 9:47 AM
前段时间用React，这段时间用Vue3（用uniapp写小程序的时候也尝试切换到vue3了），本来觉得很累的，毕竟在每次使用都要import {vue} from 'vue'之类的，在使用了unplugin-auto-import插件后，真的少写了好多。但也要看unplugin-auto-import是不是支持。
比如我现在直接引用了vue，象现在onMounted/ref等都不再定义了。
然而刚开始的时候却是怎么都没法用，这时候才发现虽然我代码都是用JS写的，但auto-import插件是ts写的，必须要引入typescript组件，然后他才生成一个：auto-imports.d.ts的文件，这时候配合<script setup>这个所谓vue3的黑魔法，才是妥妥的。
没什么大东西，就是这么记录一下
Javascript | 评论:0
| 阅读:2559
Submitted by gouki on 2022, October 30, 10:36 PM
tailwindcss现在用的人越来越多了，大量的flex以及固定的text-[],w-[]等自定义的class，确实让人用起来非常方便，然后在页面上也可以用sm:/md:/等前缀符可以直接设置相应大小屏幕所对应的class。如果class太多太长，还可以用@apply来进行自定义的缩短等
之前一直没有注意，在写一些样式的时候就直接<div class="w-full lg:w-1/2 sm:w-1/2 md:w-1/2" >结果发现在更小的屏幕下无法设置，因为sm:是代表了640px，而象手机一般是320px/414px，这时候就没办法设置了。在想着自定义xs:前缀的时候，看了一下官方文档，结果发现上面有标明一个非常重要的话：【不要使用 sm: 来定位移动设备，而应该使用无前缀的功能类来定位移动设备，并在较大的断点处覆盖它们】参考（
响应式设计 - Tailwind CSS 中文文档）。
官方提示：【因此，通常最好先为移动设备设计布局，接着在 sm 屏幕上进行更改，然后是 md 屏幕，以此类推。】
所以其实所有的样式理论上应该都是基于小屏幕写的，而比sm还大的屏幕，反而是需要加前缀进行自定义的。比如你需要小屏幕全屏，中屏幕1/2，大屏幕1/3，应该是这样写<div class="w-full sm:w-1/2 md:1/3" >因为lg比md还大，所以lg反而不需要设置了。
纯记录一下。这一个月我是从vue2写到react再返回vue3，快崩溃了。
Javascript | 评论:0
| 阅读:2209
[641]