LAFINSIR 2024-02-28 18:52 采纳率: 69.2%
浏览 30
已结题

uniapp-typescript-vue报错

我用npx degit dcloudio/uni-template-vue3-ts my-uniapp-project 命令下载了一个基于uniapp+vue3+ts的项目

但是运行时警告

img

我的tsconfig.json文件如下

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    },
    "lib": ["esnext", "dom"],
    "types": [
      "vue",
      "src/**/*.vue",
      "@dcloudio/types",
      "miniprogram-api-typings",
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-ui-types"
    ]
  },
  "vueCompilerOptions": {
    // experimentalRuntimeMode 已废弃,现调整为 nativeTags,请升级 Volar 插件至最新版本
    "nativeTags": ["block", "component", "template", "slot"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

导致我的vue文件会各种警告如

img

img

我的pakage.json如下

{
  "name": "uni-app-xiaotuxian",
  "version": "0.0.0",
  "author": {
    "name": "itheima",
    "url": "https://web.itheima.com/"
  },
  "scripts": {
    "dev:app": "uni -p app",
    "dev:app-android": "uni -p app-android",
    "dev:app-ios": "uni -p app-ios",
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
    "dev:mp-alipay": "uni -p mp-alipay",
    "dev:mp-baidu": "uni -p mp-baidu",
    "dev:mp-kuaishou": "uni -p mp-kuaishou",
    "dev:mp-lark": "uni -p mp-lark",
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:quickapp-webview": "uni -p quickapp-webview",
    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
    "build:app": "uni build -p app",
    "build:app-android": "uni build -p app-android",
    "build:app-ios": "uni build -p app-ios",
    "build:custom": "uni build -p",
    "build:h5": "uni build",
    "build:h5:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
    "tsc": "vue-tsc --noEmit --skipLibCheck",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  },
  "dependencies": {
    "@dcloudio/uni-app": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-app-plus": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-components": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-h5": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-jd": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-xhs": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-ui": "^1.5.0",
    "pinia": "2.0.27",
    "pinia-plugin-persistedstate": "^3.2.0",
    "vue": "^3.2.47",
    "vue-i18n": "^9.2.2"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.4.3",
    "@dcloudio/uni-automator": "3.0.0-3090620231104002",
    "@dcloudio/uni-cli-shared": "3.0.0-3090620231104002",
    "@dcloudio/uni-stacktracey": "3.0.0-3090620231104002",
    "@dcloudio/uni-vue-devtools": "3.0.0-alpha-3080220230511001",
    "@dcloudio/vite-plugin-uni": "3.0.0-3090620231104002",
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/node": "^18.11.9",
    "@uni-helper/uni-app-types": "^0.5.12",
    "@uni-helper/uni-ui-types": "^0.5.11",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/runtime-core": "^3.2.45",
    "@vue/runtime-dom": "^3.4.20",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "husky": "^8.0.0",
    "lint-staged": "^13.0.3",
    "miniprogram-api-typings": "^3.12.0",
    "prettier": "^2.7.1",
    "sass": "^1.56.1",
    "typescript": "^5.1.6",
    "vite": "^4.0.3",
    "vue-tsc": "^1.8.8"
  }
}


然后VSCODE也安装了插件Volar(没有下载Vetur)

img

看了网上各种教程,node_modules 也删除了重装,还是警告。到底哪里出错了

  • 写回答

24条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-02-28 19:12
    关注
    获得0.45元问题酬金

    引自免费微信小程序:皆我百晓生

    在您的问题中,您下载了一个基于uni-app+vue3+ts的项目,并尝试运行它。出现的问题主要在于TypeScript编译器无法找到Vue提供的类型声明文件。

    问题1:找不到@vue/tsconfig/tsconfig.json

    在您的tsconfig.json中,第一行试图继承一个名为"@vue/tsconfig/tsconfig.json"的基础配置文件,但编译器找不到这个文件。这可能是因为在项目的依赖项中并未包含Vue官方提供的类型声明包。为了解决这个问题,请确保已经安装了@vue/types@vue/compiler-sfc,它们通常会提供必要的TS配置文件。

    npm install -D @vue/types
    

    或者

    npm install -D @vue/compiler-sfc
    

    然后检查一下@vue/types@vue/compiler-sfc对应的路径是否正确,根据实际安装情况调整extends字段。

    问题2:Vue组件中的属性和方法引用警告

    例如,"模块“'vue'”没有导出的成员'ref'" 和 "类型“{}”上不存在属性“bannerList”。ts(2339)" 这些警告表明TypeScript编译器在类型检查时没有识别到Vue提供的ref函数和其他组件属性的类型定义。

    为了解决这类问题,除了确认已安装Vue3的类型声明(如上述),还需要确保Volar插件能够正确处理Vue3的模板和脚本中的类型信息。请检查Volar的版本是否与当前使用的Vue3版本兼容,并确保Volar是启用状态。

    如果仍然存在问题,可以在src目录下创建一个shims-vue.d.ts文件,添加以下内容来手动引入Vue3的全局声明:

    // shims-vue.d.ts
    import Vue from 'vue'
    import type { ComponentCustomProperties } from 'vue'
    
    declare module '@vue/runtime-core' {
      interface ComponentCustomProperties {
        // 假设你有全局注入的属性,例如这里的`$http`
        $http: any;
      }
    }
    
    // 添加对Vue3 Composition API的支持
    declare module '*.vue' {
      import type { DefineComponent } from 'vue'
      export default defineComponent
    }
    

    同时,确保在.vue文件中正确导入并使用Composition API,如:

    <script setup lang="ts">
    import { ref } from 'vue'
    
    const bannerList = ref<any>([])
    </script>
    

    另外,在tsconfig.jsontypes数组里,不需要直接引用vue,因为@vue/types@vue/compiler-sfc应该已经包含了Vue相关的类型声明。如有需要,可以保持其他特定于uni-app和uni-ui的类型声明。

    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 3月7日
  • 创建了问题 2月28日

悬赏问题

  • ¥15 k8s集群重启后,kubelet一直报systemctl restart kubelet.service "Failed to delete cgroup paths"
  • ¥15 微信小程序构建工具类发布到npm,install后报错
  • ¥15 amesim液压仿真问题
  • ¥15 python解析json文件时报错
  • ¥15 MATLAB优化设计
  • ¥15 ANN预测模型 200大米
  • ¥20 优秀学生的问题 oj java
  • ¥15 scratch-gui 如何集成进 react native
  • ¥15 把全局悬浮窗改为局内悬浮窗
  • ¥15 Excel vba编程调用word如何读取换行符