weixin_43990297的博客

vitepress踩坑记录

vitepress 打包遇到windows为undefiend的问题

npm的organizations大家在自己写一些库或者日常开发的时候都会发现很多的包名称是如下的"devDependencies": { "@babel/helper-compilation-targets": "^7.15.4", "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-service": "^4.1.0" }他们的结构为: @your_o

npm link:npm link you-lib : 将当前项目中node_modules下指定的库文件连接到node全局node_modules下的库文件npm link: 将当前项目连接到node全局node_modules中作为一个库文件，并解析bin文件配置创建可执行文件npm unlink将当前项目从node全局node_modules中一处#!/usr/bin/node#!/usr/bin/env node第一种是直接执行/usr/bin/目录下面的node第二种事在环境变

package.json中^符号和~符号前缀的区别node的各种包都有版本控制，迭代都非常快，版本号经常由三个数字来表示迭代，比如 "vue": "^2.6.10", "vuedraggable": "^2.24.1", "vuex": "^3.1.1", "webpack-merge": "~4.2.2"对应上面的版本号以 x.y.z ：为例子z ：表示一些小的bugfix, 更改z的号，y ：表示一些大的版本更改，比如一些API的变化x ：表示一些设计的变动及模块的重构之

webpack它是一个静态模块打包器，当webpack处理应用程序的时候，它会递归的构建应用中的各个模块的依赖关系，形成一个依赖关系图，然后将所有模块打包成一个或多个bundle它会根据主入口配置，从主入口出发，识别代码中所有的导入语句，递归的找出所有依赖，将入口和其依赖打包到一个单独的文件中 默认支持js、json文件， 支持COMMON esmodel AMD等模块类型核心概念chunk代码块，一个chunk可能由多个模块组成，可以理解为主入口文件，其他依赖资源为modulebundl

以前在项目开发中，如果使用了第三方UI库，要覆盖样式，通常使用<<< 深度选择器来进行样式穿透比如<style scoped>.a >>> .b { /* ... */ }</style>但是如果项目中使用scss,less等预处理器却无法解析>>>，所以我们使用下面的方式.<style lang="scss" scoped>.a{ /deep/ .b { /* ... */ }}

故事前景今天项目开发中遇到了一个问题，有个功能页面是H5页面，在正式环境中，用ios手机打开正常，在安卓手机使用微信却打不开 ，但是复制地址，在浏览器内又能打开，在测试环境中，ios和安卓又都可以。这一下子把我搞蒙了。排查问题跟项目经理确认后，增加生产环境的调试工具，发现在安卓机的微信环境打开h5页面，axios请求返回的http的status为0.没有正常响应。然后测试环境和正式环境的接口区别就是正式环境用了安全证书。其余东西都一样。推测是安全证书引起的问题确认问题跟后台以及运维了解，正式环境使

window.onload = function(){ var stopScrolling = function(event) { event.preventDefault(); } document.addEventListener('touchstart', stopScrolling, {passive: false}); document.addEventListener('touchmove', stopScrolling, {pas

按照 React 的规范，所有的数组组件必须绑定 key。在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。如果 dataSource[i].key 没有提供，使用 rowKey 来指定 dataSource 的主键，如下所示。若没有指定，控制台会出现以上的提示，表格组件也会出现各类奇怪的错误。// 比如你的数据主键是 uidreturn <Table rowKey="u.

从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 @ant-design/icons。在项目开发中，经常会有需求是通过数据循环渲染出动态icon，比如后台项目的侧边栏等，如果你是4.0以前版本的，就不用看了， 此处只针对4.0版本的antd写一个方法，用来生成不同的iconimport * as Icons from "@ant-design/icons";const renderIcon = (iconName) => { return React.create.

在此对项目开发中遇到的一些报错处理放在这里记录一下安装 less-loader 遇到的报错在进行 react 项目开发的时候，出现了这个错误，TypeError: this.getOptions is not a function这个实际上就是 less-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理问题的解决：通过 npm uninstall less-loader 命令卸载原版本的 less-loader，然后 通过

在react脚手架中修改配置有两种方式使用npm eject 命令 将配置弹出来（不推荐，不优雅）使用customize-cra 来新增一个config-overrides.js文件 来进行项目配置接下来，主要使用第二种方式把一些项目开发中常见配置给记录一下首先 先安装 必要的两个依赖yarn add custom-cra react-app-rewired -dev 然后，修改package.json的配置"scripts": { "start": "react-app-r

在react中，大家有的使用装饰器，比如路由，或者mobx等，但是会发现默认脚手架不支持，接下来就说一下怎么配置，网上大部分都是使用npm eject来弹出脚手架的默认配置，但这样并不优雅，社区提供了其他方案来解决修改配置的方式首先安装，以下几个依赖 customize-cra react-app-rewired @babel/plugin-proposal-decoratorsyarn add customize-cra react-app-rewired @babel/plugin-p

最近因为公司有需求，正好把老早就感兴趣的可视化表单生成工具给研究了一番，现在记录下心得体会。当时第一次看到这种拖拽生成表单或者页面的工具，就觉得很神奇，不知原理为何，后来查阅了一些资料和参考了一些开源项目，通过拆轮子搞懂了原理，解决了 自己的疑惑，在这里不将很详细的实现步骤，就记录下概要，自己在这个过程中的收获。https://github.com/Miaodashu/form_build.git一、 核心拖拽功能怎么实现的1. 使用原生的`HTML draggable` 属性，开启标签的`drag

移动端H5兼容性问题HTML方向调用系统功能使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能，使用能快速调用移动设备的的图库/文件。这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。<!-- 拨打电话 --><a href="tel:10086">拨打电话给10086小姐姐</a><!-- 发送短信 --><a href="sms:10086">发送短信给10086小姐姐&l

在项目开发完成后，就会进行打包部署，有的时候项目开发过程中，代码写的比较臃肿 或者各种包引用的比较多，就会造成打包后包的体积变大，导致部署后访问速度比较慢。 下面就记录下自己在项目中的一些配置来进行优化这些问题。通过 npm run build --report 命令（好多贴中都是借助webpack-bundle-analyzer帮助分析，不用安装这个，使用前面那个自带命令就好） 会在打包后的文件夹内生成一个report.html文件，打开会就是各种打包后文件大小的分析页面，我们可以看到生成的最大文件为c

JS方面原型继承， es6的class继承知识点一、 原型继承的几种方式通过构造函数继承// 创建个 人类 构造函数function People(){　this.type = "人";}People.prototype.say = function(){ console.log("hello People")}// 再创建个 学生 构造函数function Student(name,age){　this.name = name;　this.age= age;}

tag=“ul” 用来指定 draggable 组件渲染出来的 html 标签。v-model 绑定列表可拖动元素，通常与内部元素 v-for 引用的数组相同。v-bind 绑定组件的配置项，与 Sortable.js 的配置项相同，下面具体讲解：group：string or objectstring：命名，用处是为了设置可以拖放容器时使用object: {name, pull, put}name: 同 string 的方法pull：pull 用来定义从这个列表容器移动出去..

flex布局中设置宽度被压缩的问题当父级使用了flex布局，当内部子元素总宽度大于它的宽度时，就会等比例压缩子元素宽度，解决方法就是1、给所有的子元素设置flex-shrink：0；2、将所有子元素的width属性更改为min-width；...