Vue3 使用问题记录
- 《TypeScript 中 import type 与 import 的区别》
- TypeScript: Documentation - TypeScript 3.8
- import type 是用来协助进行类型检查和声明的,在运行时是完全不存在的。
-
问题:Delete `␍`eslint(prettier/prettier)错误
-
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存在未定义的可能》