前端禾惠（小虾虎鱼）

5 天前更新 |javascript

字符

表达式	描述
`[abc]`	字符集。匹配集合中所含的任一字符。
`[^abc]`	否定字符集。匹配任何不在集合中的字符。
`[a-z]`	字符范围。匹配指定范围内的任意字符。
`.`	匹配除换行符以外的任何单个字符。
`\`	转义字符。
`\w`	匹配任何字母数字，包括下划线（等价于`[A-Za-z0-9_]`）。
`\W`	匹配任何非字母数字（等价于`[^A-Za-z0-9_]`）。
`\d`	数字。匹配任何数字。
`\D`	非数字。匹配任何非数字字符。
`\s`	空白。匹配任何空白字符，包括空格、制表符等。
`\S`	非空白。匹配任何非空白字符。

1 周前更新

NGINX 配置 SPA 页面无缓存访问 index.html

SPA 应用打包后静态资源可以通过给文件名添加 hash 来避免缓存，但无法解决访问 index.html 缓存的问题。所以只能通过配置 NGINX 来解决，具体实现如下：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /web/dist;
        index  index.html index.htm;
        try_files $uri @index;
    }

    location @index {
        add_header Cache_Control 'no-cache, no-store';
        expires 0;
        try_files $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8080/;
    }
}

2 个月前更新 |git

git log 查询指定人从指定日期开始所有的提交记录

参数说明

--format="%s %cd" 格式化内容
- %s: subject（主题）
- %cd: commit date（提交日期，或者用 %ad (author date)）
--date=short 使用短日期格式（格式为：2023-03-15）
--author=caohuichang 指定作者
--since=2023-03-15 从指定日期开始
--grep="Merge branch" 提交主题中包含指定内容
--invert-grep 将 --grep 取反（即与 --grep 配合使用表示不包含）
--all 所有分支

1 年前更新 |git

记录一些 GIT 操作命令

放弃本地的未push的记录，并与远程同步

git reset --hard origin/master

1 年前更新 |vue, typescript

提取 Vue3 组件的 props 类型

项目使用的是 ElementPlus 组件库，在做组件的二次封装时，需要提取 ElTableColumn 组件的属性，网上搜索了一下，可以这样得到属性的类型：

import { ElTableColumn } from 'element-plus'
type TElTableProps = InstanceType<typeof ElTableColumn>['$props'];

1 年前更新 |vite

使用 unplugin-vue-components 后 Vite 启动很慢

Vite 以启动快著称，我的项目也使用了 Vite ，但启动速度却不是想象中的那么快。项目使用的是 ElementPlus 组件库，根据官方文档的推荐使用了 unplugin-vue-components 做按需引入，随着项目越做越大，启动速度也是越来越慢。

问题原因

由于实在是太慢了，所以做了一次排查，最后发现是使用了 unplugin-vue-components 导致慢，将 ElementPlus 改成全量加载启动速度是非常的快。翻了一下 unplugin-vue-components 的 GitHub Issues ，原来也有其他人遇到同样的问题。作者说是 Vite 的问题 #301

1 年前更新 |typescript

Typescript 获取对象属性的全路径作为类型

在使用 vue-i18n 时发现 t() 函数是有类型提示的，并且类型就是从 message 对象中推导出来的。于是我也尝试写一下这个类型推导。

假如有一个对象 message :

const message = {
  a: {
    b: {
      c: {
        d: '1'
      }
    },
    b1: '2'
  }
}

从该对象中获取如下类型：

type KeyPath = 'a.b.c.d' | 'a.b1'

1 年前更新 |vite, typescript, eslint

使用 Vite + Typescript + ESLint 的项目配置路径别名

使用路径别名可以大大减少项目中 ../ 、../../ 的情况。但配置路径别名则需要分别对 Vite 、TypeScript 、 ESLint 进行单独的配置。

配置 Vite 可以避免编译出错（如 npm run dev 、npm run build）。
配置 TypeScript 可以避免 ts 报错（ Cannot find module ... ）。
配置 ESLint 可以避免 eslint 报错（如果使用了 airbnb 代码风格）