vue3项目中引入ts

这篇具有很好参考价值的文章主要介绍了vue3项目中引入ts。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

提示:文章是基于vue3的项目基础上引入ts

1.基于脚手架的情况下创建 vue3项目

vue create vue3-ts

选择自定义预设,ts设置未选中状态
vue3项目中引入ts
选择yarn与npm启动项目(根据个人,在这里我选择yarn)

2.启动未引入ts的vue3项目

vue3项目中引入ts

3.在页面中(HomeView.vue)引入ts

问题一:
vue3项目中引入ts
问题二:
vue3项目中引入ts

问题一

在script 标签中引入ts后,会产生JSX语法错误,这时我们需要引入ts(全局引用与局部引用)
第一步:
全局或者局部 引用Ts并通过tsc -v 查看版本号 ts安装成功,这里我直接在项目中 yarn add typescript
npm install -g typescript
yarn add -g typescript(需要添加环境变量后 tsc-v生效)
vue3项目中引入ts

注意:使用yarn全局引入后 需要配置环境变量后 tsc-v才生效
第二步
命令生成ts配置文件tsconfig.json

tsc --init  //生成 tsconfig.json

用以下内容填充该文件,如有重复,删除此文件内的重复项

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

在 tsconfig.json 文件中设置 “jsx”:“preserve”,设置后发现还是报错,(这里设置无效,如果设置有效下一步可以略过,继续百度)
第三步:在jsconfig.json 文件下添加与 jsx(jsx 属性允许我们在项目中使用 .tsx 文件)
vue3项目中引入ts

解决问题二 (找不到模块“XXX.vue”或其相应的类型声明)

在根目录中创建 shims.d.ts文件

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
}
declare module '*'   

我们也可以修改tsconfig.json 中替换 declare module ‘*’ 如下所示

"noImplicitAny": false,
"allowJs": true,

尝试打开项目会发现如下报错
vue3项目中引入ts
解决方案
安装我们的依赖 确保安装了 TypeScript、Webpack、Vue 和必要的加载程序。

安装@vue/cli-plugin-typescript

@vue/cli-plugin-typescript内部预置了ts-loader的配置,无需单独配置(这一步是不是覆盖掉)

yarn add  @vue/cli-plugin-typescript --save-dev

安装完毕后 尝试打开项目
vue3项目中引入ts
我们将 main.js 改为 main.ts {构建成功}
vue3项目中引入ts

我们尝试注释掉 shims.d.ts 中的 declare module ‘*’ 或者 替代他的 tsconfig文件中的
“noImplicitAny”: false, “allowJs”: true,

再次编译项目会发现引入的router与store 没有相应的内置类型文件,当然main.js不会出现此问题(个人理解)
vue3项目中引入ts
修改回来 tsconfig.json shims.d.ts我们进行下一步

4.配置vue3+ts项目

我们可以看到在模块文件中产生分号报错,但是他并不会影响项目启动,我们对typescript-eslint进行配置
vue3项目中引入ts

yarn add  @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
yarn add  @vue/eslint-config-typescript --save-dev

修改.eslintrc.js

module.exports = {
    extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        '@vue/typescript/recommended'
    ],
    plugins: [
        'vue',
        '@typescript-eslint'
    ],
    rules: {
        '@typescript-eslint/no-unused-vars': 'error',
        // 允许非空断言
        '@typescript-eslint/no-non-null-assertion': 'off',
        // 允许自定义模块和命名空间
        '@typescript-eslint/no-namespace': 'off',
        // 允许对this设置alias
        '@typescript-eslint/no-this-alias': 'off',
        // 允许使用any类型
        '@typescript-eslint/no-explicit-any': ['off'],
        ......
    }
}

错误解决
vue3项目中引入ts
项目中会出现如下错误
vue3项目中引入ts
解决:在.eslintrc.js文件中添加以下代码
vue3项目中引入ts

5.其他配置

###vue.config.js配置 增加extension,引入 ts/tsx 文件时不必加后缀

module.exports = {
    chainWebpack: config => {
          config.resolve.extensions
            .add('ts')
            .add('tsx');
    }
}

在vscode中command+,打开settiings.json可配置保存时自动eslint格式化
vue3项目中引入ts文章来源地址https://www.toymoban.com/news/detail-409135.html

6.在HomeView.vue 使用Ts语法

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
interface Todo {
  id: number;
  title: string;
  isCompleted: boolean;
}
const aa = ref<Todo[]>([])
console.log(aa);
const bb:boolean = false
console.log(bb);
</script>

到了这里,关于vue3项目中引入ts的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite+vue3+ts项目中提示无法找到模块

    今天在开发过程中碰到了导入模块时提示无法找到模块这个问题,分享一下我的解决思路 首先产生这个错误是: 无法找到模块XXX,并且提示\\\'XXX\\\' is declared but its value is never read 产生这个问题的原因是我们使用了ts语法,他只能识别.ts文件,并不能识别.vue文件,所以在引入组件

    2024年02月11日
    浏览(56)
  • uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

    一、创建项目架构 首先使用官方提供的脚手架创建一个项目 在这里插入代码片 ,这里我创建的 vue3 + vite + ts 的项目: (如命令行创建失败,请直接访问 gitee下载模板) 二、下载依赖 启动 三、下载安装包 引入uni-ui src/package.json 文件配置easycom模式 引入uview-plus main.ts配置 u

    2024年02月13日
    浏览(64)
  • vscode中 vue3+ts 项目的提示失效,volar插件失效问题解决方案

    说起来很耻辱,从mac环境换到window环境,vscode的配置都是云端更新过来的,应该是一切正常才对,奇怪的是我的项目环境出现问题了,关于组件的ts和追踪都没有效果,再经过一上午的排查和试错后,终于被我解决,问题的原因是volar和ts环境之间的版本不匹配,下面来看下我

    2024年02月03日
    浏览(53)
  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第一章 技术栈简介 (开篇)

    旨在帮助初学者掌握使用现代前端技术栈构建应用的基础知识和技能。在这个系列中,我们将深入探讨如何结合Vue.js、Vite、TypeScript、Pinia和Sass这些强大的工具和框架来开发现代化的前端应用。 通过这个系列,我们将从零开始构建一个完整的前端项目,覆盖项目初始化、组件

    2024年02月05日
    浏览(53)
  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)

    在项目开发中,我们经常会使用一些工具函数,也经常会用到例如 loadsh 等工具库,但是这些工具库的体积往往比较大,如果项目本身已经引入了这些工具库,那么我们就没有必要再引入一次,所以我们需要自己封装一些工具函数,来简化我们的开发。 在 src/utils 目录下创建

    2024年02月20日
    浏览(62)
  • 基于Vue3+TS+Vite+Cesium创建项目

    随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS如今真的越来越火了,对于做GIS前端开发的人员来说,Cesium开发是绝对绕不开的一门技术,所以今天来说说如何利用当下最火的 Vue3+TS+Vite 来搭建一个基于Cesium的项目开发环境。 1.使用 yarn create vite 创建

    2024年02月05日
    浏览(75)
  • vue3 vite ts引入vue文件报错 ts(2307)

    vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行。 官方文档有说明:http://vue.dragonlm.com/guide/typescript/overview.html#ide-support 解决方法是安装插件,之后即可正常解析路径,并可以跳转到对应文件。 TypeScript Vue Plugin (Volar)

    2024年02月16日
    浏览(57)
  • Vue3 + Vite + Ts自己封装的基础组件库发布npm ,npm安装使用(Volar )支持TS 类型提示功能(vite-plugin-dts 使用)

    在开发Vue3 + Ts项目时:使用自己二次封装的基础组件,没有 Ts类型提示 ,不能像 Element-plus 鼠标停在标签或者属性上就能提示当前组件有哪些属性(即props)及其属性的类型,如下图是 Element-plus 组件的 使用Vs Code Volar的提示: 此插件的作用:为打包的库里加入声明文件(即生

    2024年02月09日
    浏览(68)
  • Vue3:组合式函数(引入外部ts文件,修改外部ts参数)

            在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用 有状态逻辑 的函数。更为复杂的业务逻辑可以使用store来处理         vue3中不在推荐使用mixins,在 Vue 2 中,mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留

    2024年02月15日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包