前端开发常见问题梳理element-plus中el-input组件正则匹配只能输入数字(手机号)，但是尝试输入中文或表情

前端开发过程中场景问题梳理（持续更新...）

element-plus中el-input组件正则匹配只能输入数字(手机号)，但是尝试输入中文或表情之后，再次输入手机号会验证失败

<el-input
  v-model.number="ruleForm.comment"
  clearable
  maxlength="11"
  oninput="value=value.replace(/[^\d]/g,'')"
  placeholder="请输入长度为11位的数字"
/>

产生原因

上面代码示例限制了只能输入数字，但是如果输入中文字符或表情符后，v-model绑定的值不再更新了，所以导致后面再次输入正确的手机号也验证失败

解决方案

监听 el-input 的 input 事件, 然后对双向绑定的值进行处理

<el-input
  v-model="ruleForm.comment"
  placeholder="请输入排序值"
  @input="(v) => (ruleForm.comment = v.replace(/[^\d]/g, ''))"
/>

运行git命令拉取提交代码出现账号密码错误时可执行如下命令

git config --system --unset credential.helper

执行完毕再次操作会重新输入账号密码

启动vue3项目报错Property 'context' does not exist on type 'NodeRequire'

安装依赖

cnpm i @types/webpack-env -D

在对应的tsconfig.json文件中新增配置

 "compilerOptions": {
    "types": ["node","webpack-env"], // 新增webpack-env
 }

在vscode 终端运行命令行时出现报错,无法加载文件，因为在此系统上禁止运行脚本

// 以管理员身份运行Windows PowerShell, 然后执行
set-ExecutionPolicy RemoteSigned 
或者
Set-ExecutionPolicy -Scope CurrentUser
// 设置值
ExecutionPolicy: Bypass

vue3中动态获取子组件实例

<template>
  <div v-for="i in 5">
    <child :ref="setRef"></child>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const childRef = []
const setRef = (el) => {
    if(el) {
        childRef.push(el)
    }
}
</script>

npm设置淘宝镜像

npm config set registry https://registry.npm.taobao.org/

vscode初次提交代码时配置仓库信息

git config --global user.name "xxx"
git config --global user.email xx.com

vue3本地启动服务时使用ip访问不了

配置dev启动命令

  "scripts": {
    "dev": "vite --host"
  }

手动给客户端程序添加注册表然后通过js调用

注册表信息,名称为xxx.reg, 其中dwtopen为自定义协议名称

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\dwtOpen]
@="URL:dwtOpen"
"URL Protocol"=""

[HKEY_CLASSES_ROOT\dwtOpen\shell]

[HKEY_CLASSES_ROOT\dwtOpen\shell\open]

[HKEY_CLASSES_ROOT\dwtOpen\shell\open\command]
@="\"D:\\pwt-demo\\PcClient.exe\" \"%1\""

在网页中可以直接通过a标签调用

<a href="dwtOpen://open-client?host=192.168.1.1&localId=11111&remoteId=22222">调起客户端</a>

vscode vue3项目代码自动格式化

安装volar 和 prettier插件，在设置中配置

"editor.formatOnSave": true,
"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},
"volar.format.initialIndent": {
    "html": true
},

在vue3项目中使用tailwind.css

安装模块

npm install -D tailwindcss postcss autoprefixer

初始化tailwind配置

执行这条命令会在项目的根目录创建postcss.config.js和tailwind.config.js两个配置文件

npx tailwindcss init -p

3.配置tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

4.配置postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
}