• 一个非常棒的开源项目 H5-Dooring 目前 star 3.1k
  • 开源地址 https://github.com/MrXujiang/h5-Dooring
  • 基本介绍 http://h5.dooring.cn/doc/zh/guide/
• 《深入浅出webpack》 http://webpack.wuhaolin.cn/

• css !important 该条样式属性声明具有最高优先级
  • https://www.cnblogs.com/meiwenzx/p/6673302.html
• 发现一个不错的 git 文档库 准备 get 一下
  • https://github.com/HenryTSZ/zeit/tree/master/source/_posts

• vue elementui table 表格的封装https://segmentfault.com/a/1190000023382224

• vue2 和 vue3 使用 typeScript 的不同方式
  • https://jishuin.proginn.com/p/763bfbd2e891
  • https://www.cnblogs.com/qq3279338858/p/12631728.html
• vue 中 lint 检查的配置
  • https://www.cnblogs.com/fengyingYZ/p/10369703.html
• dart-sass 和 node-sass 区别
  • https://blog.csdn.net/qianxing111/article/details/107617538
• 前端多媒体知识
  • https://mp.weixin.qq.com/s/yuIkTwHk5dx20r8Z0cpSDA
• google 技术栏目
  • https://www.infoq.cn/zones/google/cloud/list?id=2

• vue-class-component 和 vue-property-decorator vue 类组件

  • https://www.cnblogs.com/qq3279338858/p/12631728.html

• css transform scale 放大和缩小

  • https://www.cnblogs.com/yanggeng/p/11277199.html

• history.pushState() 可以控制浏览器自带的返回按钮

  • https://www.cnblogs.com/lguow/p/9222272.html

• export 和 export default

  • https://www.cnblogs.com/fanyanzhao/p/10298543.html

• prettier 格式化代码的配置

  • https://www.cnblogs.com/guwufeiyang/p/12886333.html
  • https://www.cnblogs.com/oneweek/p/11236515.html
  javascript

  // 局部安装prettier
      npm install --save -dev  --save-exact prettier
      // 全局安装
      npm install --global prettier

webassembly 视频进行转码 https://mp.weixin.qq.com/s/5k5f3UDNhFyc9DU-cws3og

• echarts 地图

  • x 轴和 y 轴，均可设置多个，匹配数据的时候要进行设置 yIndex
  • 柱状图的柱状 可设置颜色
  • 顶部选项 可设置 图标 icon，以及字体颜色等

• 配置渐变颜色 https://blog.csdn.net/weixin_44897255/article/details/96877562

• css中transform属性
  • https://www.cnblogs.com/yanggeng/p/11286250.html translate
  • https://www.cnblogs.com/yanggeng/p/11275771.html rotate

• vscode 插件韭菜盒子，看股票 & 基金 & 期货实时数据插件
  • https://github.com/LeekHub/leek-fund
• echart 柱状图渐变颜色
  • https://www.cnblogs.com/myfirstboke/p/11080968.html
• echart 百度地图数据
  • https://echarts.apache.org/examples/zh/editor.html?c=doc-example/map-example
  • http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.75386074913891&zoom=4.5

• 数字之间的间隔 - letter-spacing:2px;
• css 小箭头
  • http://blog.sina.com.cn/s/blog_68128cfd0101nv28.html
• css display:flex 一行两列一行三列
  • https://blog.csdn.net/ws19900201/article/details/102564033 文档最后

• animate.css 动画库
  • https://github.com/animate-css/animate.css
• 饼状图 legend 圆点设置
  • https://www.jianshu.com/p/f4338c76b169
• border-radius 50%和 100%
  • https://blog.csdn.net/csm0912/article/details/85050562
• axios 针对请求进行缓存
  • https://www.wodecun.com/blog/7931.html
  • https://github.com/ZhengXiaowei/axios-request-cache/
  • https://github.com/kuitos/axios-extensions

• 模块热替换 api
  • http://www.myjscode.com/page/article109.html
• webpack 配置设置
  • https://www.cnblogs.com/hezihao/p/8072750.html
• 百度 echarts
  • https://github.com/ecomfe/vue-echarts
  • https://echarts.apache.org/examples/zh/editor.html?c=bar-background
  • https://echarts.apache.org/examples/zh/index.html 百度 echarts 地图样例
  • https://echarts.apache.org/zh/option.html#series-bar 配置项目设置
  • 柱状图颜色随机设置

//柱状图颜色随机设置
      //https://www.cnblogs.com/kang543418095/p/5964397.html?utm_source=itdadao&utm_medium=referral
      itemStyle: {
          normal: {
　　　　　　　　//这里是重点
              color: function(params) {
                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                  return colorList[params.dataIndex]
              }
          }
      }

• 无代码 no-code(NCDP)和低代码的解释
  • https://mp.weixin.qq.com/s/Zhmh6mzCyxJlOvmuDMBSfw
  • no-code 解释https://www.makerpad.co/blog/what-is-no-code
• 无代码相关的社区
  • https://www.makerpad.co/
  • https://www.nocode.tech/
  • https://www.nucode.co
• form-create 中是如何通过 control 控制其他组件的
  • http://www.form-create.com/v2/guide/control.html
• nginx 使用
  • https://www.cnblogs.com/taiyonghai/p/9402734.html 安装到初步尝试
  • https://www.yuque.com/jarvis-zzzhw/frontend/oew2z5 配置详解
• vconsole 公众号调试,直接在微信聊天中点击下面连接，点击即可
  • debugmm.qq.com/?forcex5=true 59 nginx 安装到使用详解
  • https://juejin.cn/post/6914160814152744973
• 杀进程的小工具 fkill
  • https://github.com/sindresorhus/fkill-cli
• document.documentElement.scrollTop 微信公众号有时候获取值为 0，暂时可考虑使用 document.body.scrollTop 进行设置
• vue 可视化拖拽组件
  • https://juejin.cn/post/6908502083075325959#heading-16
  • 吸附标线 https://github.com/woai3c/visual-drag-demo/blob/main/src/components/Editor/MarkLine.vue
• 前端节流和防抖介绍
  • https://juejin.cn/post/6901493600098779150
• vue 组件嵌套会提示'make sure to provid the "name" option'
  • https://blog.csdn.net/Nalaluky/article/details/83007101
  javascript

  // 组件嵌套如何引用的问题
      components: {
        FormView: () => import('@/components/input/formView'),
      },

• 如果目前定义的组件中，没有满足要求的，可以进行自行定义组件，然后插入到自定义组件中
• dev-server 通过 express 生成一个接口，来加载一个 json 本地文件
  • https://www.cnblogs.com/lurenjia1994/p/10038725.html
  • https://www.cnblogs.com/yy136/p/9977864.html
  • http://www.imooc.com/article/details/id/291839
  javascript

  // 此种方式打包好以后其实已经加载到项目中了
  let json = require("../static/pageList.json");
  let pageModelList: any = JSON.parse(JSON.stringify(json));
  console.log(pageModelList, "this.pageModelList");

• webpack 拷贝 json 文件后部署后虚拟路径读取的问题
  js

  let pageModelList: any;
  console.log(window.location, "window.location");
  let href = window.location.href.split("?");
  requestJson.get(href[0] + "/static/pageList.json").then((res) => {
    console.log(res);
    pageModelList = res;
    //成功获取到json数据
  });

• linux 命令删除文件
  • https://blog.csdn.net/weixin_43627766/article/details/89469016
  • https://www.cnblogs.com/qq350760546/p/7890680.html xshell 命令行总结
  • https://www.yuque.com/jiushiyaoxuehaolinux/linux_ops/welcome
• linux 几个命令
  • 删除当前目录下的文件 rm -f *
  • 删除当前目录下的指定文件 rm -f xxxx.js
  • 返回上一级目录 cd ..
  • 返回根目录 cd ~
  • 直接到某个目录 cd /usr/local/......
  • ls 命令可以查看目录下的文件
  • ls -l 查看文件列表详情 https://blog.csdn.net/kexiaoling/article/details/51096164
  • 上传文件 rz -bye 命令，弹出文件夹选项进行选择即可
  • 重启网站 nginx -s reload
• markdown 语法学习
  • https://mp.weixin.qq.com/s/bZufZd8oynVOUgDYWOH9tg
  • https://www.yuque.com/yuque/help/dive-into-yuque-editor
  • https://mp.weixin.qq.com/s/bZufZd8oynVOUgDYWOH9tg
• gitbook 编写文档
  • https://www.cnblogs.com/weswes/p/9874325.html
  • https://www.gitbook.com/ 455043818@qq.com
  • https://www.kancloud.cn/ 看云平台
  • https://www.yuque.com/ 语雀
• vue 中 nextTick 妙用
  • 在 created 和 mounted 阶段，如果需要操作渲染后的试图，也要使用 nextTick 方法。
  • 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted
  javascript

  this.$nextTick(() => {
    document.documentElement.scrollTop = sessionStorage.getItem("scrollH") || 0;
    console.log(
      document.documentElement.scrollTop,
      "document.documentElement.scrollTop"
    );
  });

• window.requestAnimationFrame 告诉浏览器要执行动画
  • https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
  • 页面最小化了，或者被 Tab 切换关灯了，页面绘制全部停止，资源高效利用；
  • window.cancelAnimationFrame 取消回调函数
• window.setInterval 以指定的周期执行某个函数运行，window.clearInterval 取消由 setInterval()方法设置的定时器。
  javascript

  private executeAnimation() {
      let self = this;
      window.setInterval(function () {
        self.startAnimation('right');
      }, 3000);
    }

• webpack 配置官方文档
  • v5 版本 https://webpack.docschina.org/
  • v4 版本 https://v4.webpack.docschina.org/
  • 插件地址配置 https://v4.webpack.docschina.org/concepts/#插件-plugin-
  • CopyWebpackPlugin https://www.webpackjs.com/plugins/copy-webpack-plugin/
  • 配置简易解释 https://www.cnblogs.com/yincece0316/p/10736715.html

  new CopyWebpackPlugin({
        patterns: [
          {
            from: __dirname+'/src/static',
            to: 'static', // 不设置则回到默认根路径下面
          },
        ],
        // copyUnmodified: true,
      }),

• 通过 adb.exe 连接机顶盒来查看应用的日志记录

  • 查看 adb 版本 adb version
  • 通过 IP 地址连接机顶盒 adb connect 172.18.0.80:5555
  • 查看应用 apk 列表 adb shell pm list package
  • adb devices 查看连接设备
  • adb kill-server
  • netstat -ano |findstr 5037
  • adb disconnect
  • 链接机顶盒 ----adb connect 172.18.0.239
  • google 浏览器中链接 chrome://inspect/#devices----------edge://inspect/#devices
  • 进入命令 ----adb shell
  • 查看包名列表----- pm -l |grep have
  • 卸载 package ---- pm uninstall cn.haveplus.hoteltv（海屋 apk 可通过遥控卸载）
  • 退出 shell ---- exit
  • 安装 apk ----adb install C:\Users\chill\Desktop\havetv-release.apk
  • 开启 start ----- adb shell am start cn.haveplus.hoteltv

• 常用开发代码函数查询 mac 下 dash，window 下 devDocs

• elementui table 中的那些基本操作

  • https://www.jianshu.com/p/2251cda42425

• mapBox 地图指引

  • https://account.mapbox.com/ 官网地址，设置 accessTokens
  • http://www.mapbox.cn/mapbox-gl-js/api/#map 中文文档
  • https://github.com/mapbox/mapbox-gl-draw/ 绘制
  • https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/ 绘制模板

• mapBox 空间分析库 truf.js

  • https://www.cnblogs.com/zhurong/p/12209209.html

• ts 后缀视频播放可通过 mux.js

  • https://www.cnblogs.com/ypppt/p/13683685.html
  • https://docs.videojs.com/tutorial-vue.html

• 控制台 console 打印日志的开启和关闭

  javascript

  // 判断配置文件是否开启日志调试 是否输出日志 True 输出 False 不输出
  const logDebug = process.env.NODE_ENV !== "production";
  console.log = (function (oriLogFunc) {
    return function () {
      if (logDebug) {
        oriLogFunc.apply(this, arguments);
      }
    };
  })(console.log);

• 高德地图 3D demo

• https://developer.amap.com/api/javascript-api/reference/maps-3d

• vue 前端项目 webpack 打包设置路径的问题，主要是 publicPath

  • 官网配置地址 https://cli.vuejs.org/zh/config/#publicpath

  // vue.config.js中路径设置
       module.exports = {
         lintOnSave: "error",
         publicPath: "./",    // 相对路径，这样可以随意部署任何路径
         outputDir: "../release/ui/",  // 配置打包输出路径
         assetsDir: "static",       // 配置css、js、img等路径
         productionSourceMap: false,
         css: {
           loaderOptions: {
             // global scss variables 传递配置选项到 sass-loader
             scss: {
               prependData: `@import "~@/styles/_variable.scss";`,
             },
           },
         },

• Python 命令行神器 Click （pip install -U click），pip 在 python 中

  • https://www.cnblogs.com/nima/p/11751459.html

• git 针对 tag 标签设置，tag 是针对所有分支的

  • 所有项目，发布版本到 SIT，都需要打标签，以便追溯版本所对应的代码。如果后面需要改版本拉分支修改，也非常方便；

  // 添加一个tag
  git tag -a 3.11.3.001 -m "release 3.11.3.001"
  git push origin 3.11.3.001
  
  //删除一个tag
  git tag -d 3.11.3.001
  git push origin :refs/tags/3.11.3.001
  
  // 查看分支
  git tag
  
  // 在某个commit 上打tag  git tag
  git tag test_tag c809ddbf83939a89659e51dc2a5fe183af384233　　　　
  git push origin test_tag　　　　//!!!本地tag推送到线上
  
  // 根据tag创建分支
  https://www.cnblogs.com/senlinyang/p/9455426.html
  git branch newbranch 3.11.3.001
  
  // 然后可以切换到分支
  git checkout newbranch
  
  // 再通过命令将本地仓库推送到远程仓库
  git push origin newbranch
  
  // 创建新的分支
  git branch branchname
  
  // 是将远程主机的最新内容拉到本地 ,用户在检查了以后决定是否合并到工作本机分支中。
  git fetch
  //更多基本操作
  //https://www.cnblogs.com/runnerjack/p/9342362.html

• 查看 markdown.md 文件可以使用 Typora

  • 下载地址 https://www.typora.io/

• web 计时机制 performance 对象

  • https://www.cnblogs.com/xiaohuochai/archive/2017/03/09/6523397.html

• window performance 监测时间

  • http://www.cocoachina.com/articles/19882
  • https://www.cnblogs.com/web-easy/p/5287136.html

• react color 颜色采集控件

  • https://casesandberg.github.io/react-color/#usage-include
  • https://casesandberg.github.io/react-color/
  • https://www.ctolib.com/article/compares/16070

• 浏览器视频转码

  • https://github.com/bgrins/videoconverter.js
  • https://github.com/FFmpeg/FFmpeg

• 2020 年大前端技术趋势解读

  • https://mp.weixin.qq.com/s/aAmFyYF7Y6F2-9-LrZ-fsg

• css1、css2、css3 以及 Sass、Scss

  • https://www.cnblogs.com/xj-excellent/p/12422126.html
  • http://www.mb5u.com/tool/css2/ css2 手册

• typescript 前端项目中引入 mockjs（暂时没有使用接口形式）

  • https://blog.csdn.net/weixin_42512937/article/details/102971496

    javascript

    //1、----- 添加一个.ts文件，在顶部进行引入
    import Mock from "mockjs";
    
    let pageModelList = Mock.mock({
      code: 0,
      message: "请求成功",
      data: {
        docs: {
          //......
        },
      },
    });
    
    export default pageModelList;
    
    //2、------ 再在使用的地方进行导入
    import pageModelList from "@/mock/pageList";
    // 接下来便可以使用了
    console.log(pageModelList, "this.pageModelList");

• vue 项目中 main.js Vue 全局 附加给 window.vm，示例代码截图如下

  javascript

  // 在main.js中的设置
  window.vm = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount("#app");
  export default window.vm;

  
  
  javascript

  // 在使用的地方可以直接调用
  window.vm.$router.push("/");

• keepalive 和 document.documentElement.scrollTop 测试中还是发现列表到详情再返回，有时候返回后位置还是异常的，或者图片预览弹窗后关闭时。

• EPG 机顶盒样式显示问题

  • html 中每个页面元素会有 focus(影响机顶盒样式的显示):表示元素被赋予焦点 和 blur() ：表示元素失去焦点
  • 首页加载白屏(暂时感觉是代码执行问题)
  • 图片加载不完全（有时候只显示三分之一、四分之一），机顶盒问题

• 今日通用表单没有进行，参考一篇文章

  • http://www.form-create.com/v2/guide/control.html

• vue keepalive 发现一旦设置某个路由为 true,后续通过动态设置就是无效的后来发现 github 官网也有很多人遇到这个问题

  • https://github.com/vuejs/vue-router/issues/811
    目前通过变通的方式进行解决此问题，凡是要进行缓存的组件页面，开始都将 keepalive 设置为 true，后续通过钩子函数去触发数据列表更新。

• vue router 官网有时候可以看一下 api，感觉有很多自己是没有用到过的

  • https://router.vuejs.org/zh/installation.html

• vue elementui radio 在封装为表单控件，且可设置为必填项目，其 label 设置与外部赋值要保持一致的数据类型，而且 required 传入值如果为 undefined 要经过判断，代码如下(截取部分)

export default {
      props: {
        column: {
          type: [Object],
          default: () => {},
        },
        data: {
          type: Number,
          default: undefined,
        },
      },
      data() {
        return {
          rules: [
            {
              // 加上双？？，防止出现选中后提示请选择"this.column.title"
              required: this.column.required ?? false,
              message: '请选择' + this.column.title,
              trigger: 'change',
            },
          ],
          list: [],
        }
      },
      created() {
        this.getList()
      },
      computed: {
        value: {
          get: function() {
            return this.data
          },
          set: function(val) {
            console.log(val, typeof val, 'this.radioView.val')
            this.$emit('update:data', val)
          },
        },
      },

此为一个子组件，data 会传入值类型要与 this.getList 中设置的 label 值要保持一致(计算属性 value 会去绑定 radio 的 v-model)。

• css 颜色大全表

  • https://www.cnblogs.com/chenxiaomeng/p/6572319.html
  • https://blog.csdn.net/qq_42152029/article/details/81984596

• html 不同显示色差问题处理

  • https://www.zhihu.com/question/30113871

• css 三角箭头

  • http://ourjs.com/detail/532bc9f36922aa7e1d000001

• SSH 阮一峰学习笔记

  • https://github.com/wangdoc/ssh-tutorial

• vconsole，引入项目 - https://blog.csdn.net/weixin_43232488/article/details/83014086

• Less 中& 符号的妙用

  • https://blog.csdn.net/weixin_45959525/article/details/108396944

• vue 中将 v-for 循环组件（通过 v-if 进行展示），方案修改为 component 组件，简化代码

<div v-for="(item, index) in columnList" :key="index">
            <component
              :is="item.type + 'View'"
              :column="item"
              :data.sync="formData[item.name]"
            />
            /*
            <!--文本框Input-->
            <!-- <TextView
              :column="item"
              :data.sync="formData[item.name]"
              v-if="item.type.toLowerCase() === 'text'"
            /> -->
            <!--文本框Input-->
            <!-- <TextAreaView
              :column="item"
              :data.sync="formData[item.name]"
              v-if="item.type.toLowerCase() === 'textarea'"
            /> -->
            <!--数值框Number-->
            <!-- <NumberView
              :column="item"
              :data.sync="formData[item.name]"
              v-if="item.type.toLowerCase() === 'number'"
            /> -->
            */

• IMWeb 前端团队总结 https://mp.weixin.qq.com/s/muljS3iA0c2j1tIICLOhFQ

• WebAssembly(WASM)学习了解

  • https://www.cnblogs.com/jixiaohua/tag/WebAssembly/

  IMWeb 团队擅长的音视频领域，我们通过将 ffmpeg 编译为 wasm 版本且在浏 览器中运行，将过去处于黑盒中，只有浏览器底层才能使用的音视频编解码能力彻底解放。目前我们可以在前端页面中对音视频流直接进行处理，在完全不依赖后台的情况下，便捷、高效的实现了视频播放帧预览与视频帧截图等功能。目前团队正在进一步探索 wasm 在音视频以及其他过去前端无法触及的领域的可行性实践。

• React 可视化框架，目前 3047 个 star

• https://github.com/brick-design/react-visual-editor

• github.io 搭建个人网站

  • 把代码推到master，通过github actions 打包产物到 gh-pages分支