日常的开发踩坑记录，活到老学到老，干一行爱一行。

静态html的scss应用

Q：纯静态页面html，想直接用sass怎么办？

A：vscode Live Sass Compiler 插件保平安！这个插件可以自动编译scss，并在当前scss文件下生成变异之后的css跟css.map文件，如果你已经写成css了，可以在 www.sass.hk/css2sass/ 中进行转换。

position:sticky 的定位效果

Q:apple官网，下滑滚动条实现的动画效果，是怎么实现的？

A：其核心的定位采用了sticky的方式，详细链接可查看，www.cnblogs.com/coco1s/p/64… ，当然也有其他插件可以使用 www.dowebok.com/134.html

iOS中href的#锚点跳转无效的问题解决

用js定位方式跳转

document.documentElement.scrollTop = (<HTMLDivElement>document.getElementById(id)).offsetTop;

ps的曲线图理解

关于vue常用UI组件中的RenderContent设置

//以封装的arco design 组件为例，h返回一个虚拟dom以供使用
import {h} from 'vue';
export function arcoModal(content:string,func:string='info',title:string='提示') {
   console.log(h)
   Modal[func]({
       title,
       content:h('div', {class:'textCenter'}, content),
       alignCenter:true,
       simple:true
   });
}

vue3 scss的/deep/报错解决

这种情况一般出现在你使用v-html之后，无法给其施加影响；或者是子级组件需要统一在父组件强制改动样式的时候

.main ::v-deep i{
 color: #00c38d;
}

用charles做mock接口

charles配置

桌面新建test.json文件如下

请求即可

指向文件的配置方式,配置完成后 http://mockapi:8082/path/2.json 即可访问

vue3中出现 api.now is not a function的处理

这是vue开发工具导致的，停用beta版devtools beta，使用稳定版即可。

ts中使用索引obj[key]报错配置

suppressImplicitAnyIndexErrors": true,

解决vue3中的vsconsole引入问题

//vue2这样使用，这样可以优化包体积
if (process.env.NODE_ENV == 'development') {
   const VConsole = require('vconsole'); 
   new VConsole()
}

//但是在vue3中require是不支持的，于是乎换一种方式，采用异步加载的方式
if (isDev()) {
   import('vconsole').then(vconsole=>{
     new vconsole.default();
   })
 }

requestAnimationFrame的作用及使用

[转载，解释的不错] www.jianshu.com/p/a4edf06b2…

vite.config.ts的打包配置

    build:{
    minify: 'terser',
    terserOptions: {
      compress: {
          //生产环境时移除console.log()
          drop_console: true,
          drop_debugger: true,
      },
    },
    commonjsOptions: {
        //解决require咋打包环境的报错
      transformMixedEsModules: true
    }
  },

git提交规范

blog.csdn.net/Flyfreelyls…