vue3笔记_报错处理记录

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

简介

使用vue3+ts+pinia+element-plus开发跨平台桌面应用时遇到的报错，和处理方法

Could not find a declaration file for module

**原因: **

这个找不到依赖的声明文件，有些是因为依赖本身的版本和现在的ts或vue没有对上

比如 几个月前写的module,但是ts和vue都升级了好几个小版本，就会报上述错误

解决方法:

在根目录建个shims-vue.d.ts的文件，来主动声明这些包

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}
declare module '@cloudgeek/vue3-video-player';
declare module '@cloudgeek/playcore-hls';
declare module 'vue3-video-play';

把报错的依赖包都写上，然后重启vscode,后续操作一样，如果不生效，就重启vscode

Parameter ‘XXX’ implicitly has an ‘any’

原因:

报这个错是因为 ts是强类型的语言，需要指定参数，变量等为某某类型(如字符串，数据等)

如果不指定类型，是any类型的话，ts不会编译，且vscode页面会报错

解决方法:

1. 直接在ts配置文件中将严格模式改为false

tsconfig.json是ts的配置文件

"strict": false, //不允许严格模式

改完如果不生效，建议重启vscode(还得重启大法)

2. 在报错的页面将变量，属性，参数等声明相应的类型

import { ref } from 'vue'

const players = ref({})

const viewCore = (id: number,player: string) => {
  console.log(id,player)
  players.value[id] = player
}

const pip = (val: string) => {
  players.value && players.value[val] && players.value[val].requestPictureInPicture()
}

element-plus icon全局注册和使用

为了方便icon的使用，避免使用麻烦，直接使用icon的全局注册

安装

npm install @element-plus/icons-vue

全局注册

//在main.js和main.ts注册
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

在组件中使用, 从element-plus icon页面复制过来的icon(不区分大小写)

<div>
  //size 改变大小， color改变颜色
  <el-icon v-for="k,v in icon" :key="v" color="#409EFC" size="50px">
      //根据数组索引显示icon
     <component :is="icon[v]"></component>
  </el-icon>    
</div>

//js部分 使用数组,不区分大小写
const icon = ref(['user','film','shop','BellFilled','Bell','CameraFilled','camera'])

常规使用

// 直接在组件中使用
<User />

效果图

小结

本文为记录vue3使用过程碰到的坑，后续有坑持续更新