vue3項目中引入ts的詳細(xì)圖文教程
提示：文章是基于vue3的項目基礎(chǔ)上引入ts
1.基于腳手架的情況下創(chuàng)建 vue3項目
vue create vue3-ts
選擇自定義預(yù)設(shè)，ts設(shè)置未選中狀態(tài)
選擇yarn與npm啟動項目（根據(jù)個人，在這里我選擇yarn）
2.啟動未引入ts的vue3項目
3.在頁面中（HomeView.vue）引入ts
問題一：
問題二：
問題一
在script 標(biāo)簽中引入ts后，會產(chǎn)生JSX語法錯誤，這時我們需要引入ts（全局引用與局部引用）
第一步：
全局或者局部 引用Ts并通過tsc -v 查看版本號 ts安裝成功，這里我直接在項目中 yarn add typescript
npm install -g typescript yarn add -g typescript（需要添加環(huán)境變量后 tsc-v生效）
注意：使用yarn全局引入后 需要配置環(huán)境變量后 tsc-v才生效
第二步：
命令生成ts配置文件tsconfig.json
tsc --init //生成 tsconfig.json
用以下內(nèi)容填充該文件，如有重復(fù)，刪除此文件內(nèi)的重復(fù)項
{
"compilerOptions": {
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"module": "es2015",
"moduleResolution": "node",
"target": "es5"
},
"include": [
"./src/**/*"
]
}
在 tsconfig.json 文件中設(shè)置 “jsx”：“preserve”，設(shè)置后發(fā)現(xiàn)還是報錯，（這里設(shè)置無效，如果設(shè)置有效下一步可以略過，繼續(xù)百度）
第三步：在jsconfig.json 文件下添加與 jsx（jsx 屬性允許我們在項目中使用 .tsx 文件）
解決問題二 （找不到模塊“XXX.vue”或其相應(yīng)的類型聲明）
在根目錄中創(chuàng)建 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,
嘗試打開項目會發(fā)現(xiàn)如下報錯
解決方案：
安裝我們的依賴 確保安裝了 TypeScript、Webpack、Vue 和必要的加載程序。
安裝@vue/cli-plugin-typescript
@vue/cli-plugin-typescript內(nèi)部預(yù)置了ts-loader的配置，無需單獨配置（這一步是不是覆蓋掉）
yarn add @vue/cli-plugin-typescript --save-dev
安裝完畢后 嘗試打開項目
我們將 main.js 改為 main.ts {構(gòu)建成功}
我們嘗試注釋掉 shims.d.ts 中的 declare module ‘*’ 或者 替代他的 tsconfig文件中的
“noImplicitAny”: false, “allowJs”: true,
再次編譯項目會發(fā)現(xiàn)引入的router與store 沒有相應(yīng)的內(nèi)置類型文件，當(dāng)然main.js不會出現(xiàn)此問題（個人理解）
修改回來 tsconfig.json shims.d.ts我們進行下一步
4.配置vue3+ts項目
我們可以看到在模塊文件中產(chǎn)生分號報錯，但是他并不會影響項目啟動，我們對typescript-eslint進行配置
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設(shè)置alias
'@typescript-eslint/no-this-alias': 'off',
// 允許使用any類型
'@typescript-eslint/no-explicit-any': ['off'],
......
}
}
錯誤解決
項目中會出現(xiàn)如下錯誤
解決：在.eslintrc.js文件中添加以下代碼
5.其他配置
###vue.config.js配置 增加extension，引入 ts/tsx 文件時不必加后綴
module.exports = {
chainWebpack: config => {
config.resolve.extensions
.add('ts')
.add('tsx');
}
}
在vscode中command+,打開settiings.json可配置保存時自動eslint格式化
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>
總結(jié)
到此這篇關(guān)于vue3項目中引入ts的文章就介紹到這了,更多相關(guān)vue3項目引入ts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue中ref的用法及演示，ref被用來給元素或子組件注冊引用信息。引用信息會被注冊在父組件上的$refs對象上，下面來看看文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
在vue中獲取wangeditor的html和text的操作
這篇文章主要介紹了在vue中獲取wangeditor的html和text的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue?3已經(jīng)穩(wěn)定了相當(dāng)長一段時間了。許多代碼庫都在生產(chǎn)環(huán)境中使用它，其他人最終都將不得不遷移到Vue?3。我現(xiàn)在有機會使用它并記錄了我的錯誤，下面這些錯誤你可能想要避免2023-03-03
今天小編就為大家分享一篇關(guān)于Vue項目安裝插件并保存，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了vue addRoutes路由動態(tài)加載操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue.js之組件系統(tǒng),本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue-cli腳手架-bulid下的配置文件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來處理類似的事件，具體內(nèi)容詳情大家參考下本文2018-05-05
這篇文章主要介紹了Vue項目接入Paypal實現(xiàn)示例詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue中ElementUI結(jié)合transform使用時彈框定位不準(zhǔn)確問題解析
在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對頁面進行縮放,但是此時發(fā)現(xiàn)彈框定位出錯問題,無法準(zhǔn)備定位到實際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧2024-01-01