vue+typeScript 项目踩雷记

1. 引入 js-cookie 第三方 库时 在 main.ts 中使用 import 导入模块时 报错，提示 找不到该模块得声明文件，无法导入模块

解决方法 重新 安装 获取模块得声明文件

• 第一种
  npm i @types/js-cookie -S

• 第二种
  自己创建 一个 声明文件 x.d.ts

// x.d.ts

declare module 'js-cookie'

2. 在 使用 ref 进行 dom 操作时 this.$refs.xxx.focus() 报错

Property 'focus' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'focus' does not exist on type 'Vue'.Vetur(2339)

解决方法：

声明一个变量 接收 
@Components({})
export default class XXX extends Vue{
  
  private elPassword:any = this.$res.password

  private  showPwd():void {
    this.$nextTick(()=>{
      this.elPassword.focus()
    })
  }
}

vue 中的 normalize.css的使用

首先安装 normalize.css

npm i normalize.css --save-dev

在 main.js 中引入

import 'normalize.css'

在 引入 Vue-amap 地图组件时，build的时候 因为 AMap全局 变量 报错而打包失败

image.png

解决方法

1 可以在使用到 AMap的地方 加一行 注释 //@ts-ignore 忽略对 AMap的属性检查

2 可以新建一个 xx.d.ts 类型声明文件

global.d.ts

declare global{
  const AMap:any
}