Vue3 使用问题记录

Vue3 使用问题记录

• 《TypeScript 中 import type 与 import 的区别》
  • TypeScript: Documentation - TypeScript 3.8
  • import type 是用来协助进行类型检查和声明的，在运行时是完全不存在的。

• 问题：Delete `␍`eslint(prettier/prettier)错误

  • 参考：Delete `␍`eslint(prettier/prettier)错误_一晌贪欢i的博客-CSDN博客

  • windows环境:  git config --global core.autocrlf false

  • .prettierrc 文件

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "endOfLine":"lf"
}

• 问题：JSX 元素类型“RouterLink”不具有任何构造签名或调用签名。ts(2604)

•  把 volar插件禁了，重启vscode。建议使用插件：

•  vue插件

• 问题：表单验证规则
  • 比如表单组件：Form 表单 | Element Plus
  • element-plus内置了  GitHub - yiminghe/async-validator: validate form asynchronous
• 校验规则：

export const rules = {
  name: [
    {
      required: true,
      message: '用户名是必传内容~',
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{5,10}$/,
      message: '用户名必须是5~10个字母或者数字~',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '密码是必传内容~',
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{3,}$/,
      message: '用户名必须是3位以上的字母或者数字~',
      trigger: 'blur'
    }
  ]
}

• 使用：

• 问题：组件实例引用

const formRef = ref<InstanceType<typeof ElForm>>()

• 参考：TypeScript: Documentation - Utility Types
• 问题：浏览器如何缓存数据

class LocalCache {
  setCache(key: string, value: any) {
    window.localStorage.setItem(key, JSON.stringify(value))
  }

  getCache(key: string) {
    // obj => string => obj
    const value = window.localStorage.getItem(key)
    if (value) {
      return JSON.parse(value)
    }
  }

  deleteCache(key: string) {
    window.localStorage.removeItem(key)
  }

  clearCache() {
    window.localStorage.clear()
  }
}

export default new LocalCache()

• 问题：config: AxiosRequestConfig<any> 对象可能为“未定义”。ts(2532)
• 参考：《在config.headers存在未定义的可能》