项目使用 element-ui，使用了 MessageBox 弹框组件

组件的一个 demo 是这样的，就是可以通过 vnode自定义message的内容

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
      }
    }
  }
</script>

因为项目升级了 vue 的版本为 2.7，所以都使用了setup的方式来写代码。因为vue 2.7 中有一个 h 函数，所以也就直接 import 进来使用

总结了使用yalc进行本地开发时遇到的问题，以及解决方案

问题点以及解决办法

1. yalc push的是npm项目打包后的lib产物，每次修改代码都需要build，然后yalc push

   针对每次都要手动更改的问题是必须要解决的，用nodemon就能解决这个问题，只要项目内代码有变更，则执行build命令，打包代码，并且最后用yalc push上传

2. yalc 包命名如果跟npm包一样，在使用yalc包的demo项目需要频繁修改package.json引入的方式

   实际是package.json的name问题，解决方案是本地调试的使用一个name，正式包的用另一个name，但是为了避免要不断手动改name的麻烦，也是为了避免直接发布错的问题，编写一个webpack 自定义插件，直接修改package.json的name，同时区分开几个环境，不同环境不同name，使得demo发布到不同环境时也能使用不同的npm包。同时编写快速添加yalc和移除yalc包的命令，比如npm run add就能添加yalc包到项目内

3. demo项目无法识别yalc的更新从而触发热更新，需要手动重新run一次

   同样是使用nodemon 进行处理，检测到.yalc文件夹发生变更就重新运行项目

4. demo重新运行打包时间比较慢，两边都要重新运行一次到刷新页面的用时比较长

   demo项目可以使用vite作为构建工具，能够显著提高开发环境的构建速度，这样热更新的时间就少了一大半

完整代码可看git地址：https://github.com/LwcReber/yalc-project

在2.7中新增了Composition API，解决了mixin的问题

如果是老项目可以尝试升级一下，hook的方式极大的提升了代码质量

下面大概说一下源码组合式API的流程

在最新的代码中可以看到vue已经全部使用ts进行了重写，在看源码时提供了极大的便利。

组合式API主要集中在 src/v3文件夹内，完全对应vue3的的组合式API的写法

开发h5页面的时候，在测试时遇到bug如果单凭vconsole这类工具还是会比较弱的。有时候想要修改页面元素，或者查看元素，在浏览器上查看就会很方便，这里分享一下如何通过电脑来调试真机的页面

安卓​

在谷歌浏览器安装ADB plugin

安卓手机通过数据线连接到电脑上，弹出USB用于的弹框，选择传输文件

手机在开发者选项中找到USB调试，打开USB调试

然后在手机的谷歌浏览器中打开对应网址，在电脑的谷歌浏览器上输入chrome://inspect/#devices

就能看到手机设备

create-react-app 相信开发者已经非常熟悉，最近vite也火了，我也在项目中用了起来。

试了一把vite带来的极速体验，同时也踩了它的坑

下面描述下，用vite创建一个react的项目过程

创建项目​

根据官网提供的，使用了 react-ts 模板，创建完成后，页面跟create-react-app相差不大

npm init vite@latest my-react-app --template react-ts

看到index.html 模板的时候，script标签变成这种，type="module"，关键就是这个

<script type="module" src="/src/main.tsx"></script>

如何阅读​

在阅读源码时，我的个人做法是

1. 网上找找有没有对应博客分享，先去看看别人是如何理解的
2. 查找有没有对应的源码整体架构图，并不是文件夹目录介绍，是这份源码的实现流程图
3. 下载源码后，首先要找的就是源码入口
4. 在阅读源码的过程中，要用思维导图，将自己看过的地方记录下来。并不是记录具体代码，而是代码块实现的什么功能有什么用，记录下来。为什么要这样呢，因为后面再回去看的时候可以结合思维导图，看看什么地方自己了解的，还有什么地方自己不明白的。做到看过也能有印象

入口​

找入口文件​

在package.json中直接找入口，并不是main属性指定的文件地址，因为main属性是production环境下使用的包。

在scripts中可以看到dev的环境区分了很多中环境，这里我们主要找的到是web全平台的，也就是第一，在scripts/config.js中有配置

打开scripts/config.js找到对应的环境web-full-dev

'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  },

可以看到entry已经找到了，因为这个文件有定义了resolve函数，所以entry是src/platforms/web/entry-runtime-with-compiler.js

从这里也能看出vue处理各自不同环境，分别定义不同入口，工程化方面做的非常好

bable 6.x版本

按照文档装完jest后，一直报错。发现是在.vue文件中，script引入了第三方组件的css文件。 一番度娘后，终于找到解决办法

1. 先npm install --save-dev identity-obj-proxy
2. 然后在package.json中,Jest的配置中加入即可

   "moduleNameMapper": {
      "\\.(s?css|less)$": "identity-obj-proxy"
    }
   

最近使用egg做了一个学习项目，整个过程下来，对egg也已经比较熟悉。

上手egg其实很简单

三要素： 路由（Router）、控制器（Controller）、服务（Service）

1. 在config.defautl.js中

   config.swaggerdoc = {
     ...
     securityDefinitions: {
         Bearer: {
           type: 'apiKey',
           name: 'Authorization',
           in: 'header',
         }
     }
      ...
   }
   

   在securityDefinitions中定义Bearer属性（任意字段都可以，Bearer是因为Authorization中的配置需要书写，所以用该字段比较好cv）

2. 在接口controller定义里面，swagger的书写添加上面定义那个属性即可, 如下

   /**
      * @summary 新增article
      * @description 新增article
      * @router post /api/v1/article
      * @Bearer
      * @response 200 baseResponse
      */
   

   只要在接口定义中加上@Bearer即可

这样在swagger-ui中配置了Authorization值后，请求header的Authorization属性都会带有配置的值

最近整理项目中发现，头像这个应用的场景很多，而且还要一些需要特殊处理的比如想有生成头像的这种操作。于是便着手搞了一个头像的组件发布到npm中 view-avatar

1. 为什么要有这个组件？