如何将打字稿添加到现有的 vue3 项目？

Posted 2023-02-23

【中文标题】如何将打字稿添加到现有的 vue3 项目？

【英文标题】：How to add typescript to existing vue3 project?

【发布时间】：2021-10-27 03:41:28

【问题描述】：

我有以下package.json 文件：

    "name": "view",
    "version": "0.1.0",
    "private": true,
    "scripts": 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    ,
    "dependencies": 
        "@vue-leaflet/vue-leaflet": "^0.6.1",
        "autoprefixer": "^10.3.1",
        "core-js": "^3.6.5",
        "gpxparser": "^3.0.8",
        "leaflet": "^1.7.1",
        "postcss": "^8.3.6",
        "tailwindcss": "^2.2.7",
        "typescript": "^4.3.5",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-0",
        "vue3-openlayers": "^0.1.38",
        "vuex": "^4.0.2"
    ,
    "devDependencies": 
        "@vue/cli-plugin-babel": "^5.0.0-beta.3",
        "@vue/cli-plugin-eslint": "^5.0.0-beta.3",
        "@vue/cli-plugin-router": "^5.0.0-beta.3",
        "@vue/cli-service": "^5.0.0-beta.3",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^7.32.0",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-vue": "^7.0.0",
        "prettier": "^2.2.1",
        "sass": "^1.26.5",
        "sass-loader": "^8.0.2"
    

如何向这个 vue3 项目添加打字稿？

我使用 yarn 作为包管理器，当我尝试通过以下方式安装 typescript 时 yarn add typescript，它确实将它安装到项目中，但我不能在我的组件中使用 TypeScript。

【参考方案1】：

在命令行上运行vue add typescript

文档：@vue/cli-plugin-typescript

【讨论】：

很遗憾，我无法使用yarn global add @vue/cli 安装 vue。它给了我一条成功消息，但是当我运行 vue --version 时，它说找不到 vue。我正在使用 Windows 并尝试以管理员身份安装它。有任何想法吗？还是我应该问一个单独的问题？

但是从 package.config 看来您已经在使用 Vue CLI，所以我希望您已经安装了它。任何。似乎是纱线的问题。如果你用谷歌搜索，你会发现很多问题。我已经有一段时间使用纱线（切换到 pnpm）。您可以尝试运行yarn global bin - 这应该会打印 yarn 将为您的包安装可执行文件的文件夹。。检查您是否在 PATH 中有此文件夹。 classic.yarnpkg.com/en/docs/cli/global