vue3項目中引入ts的詳細圖文教程
提示：文章是基于vue3的項目基礎上引入ts
1.基于腳手架的情況下創(chuàng)建 vue3項目
vue create vue3-ts
選擇自定義預設，ts設置未選中狀態(tài)
選擇yarn與npm啟動項目（根據(jù)個人，在這里我選擇yarn）
2.啟動未引入ts的vue3項目
3.在頁面中（HomeView.vue）引入ts
問題一：
問題二：
問題一
在script 標簽中引入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)容填充該文件，如有重復，刪除此文件內(nèi)的重復項
{
"compilerOptions": {
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"module": "es2015",
"moduleResolution": "node",
"target": "es5"
},
"include": [
"./src/**/*"
]
}
在 tsconfig.json 文件中設置 “jsx”：“preserve”，設置后發(fā)現(xiàn)還是報錯，（這里設置無效，如果設置有效下一步可以略過，繼續(xù)百度）
第三步：在jsconfig.json 文件下添加與 jsx（jsx 屬性允許我們在項目中使用 .tsx 文件）
解決問題二 （找不到模塊“XXX.vue”或其相應的類型聲明）
在根目錄中創(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)部預置了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 沒有相應的內(nèi)置類型文件，當然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設置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é)
到此這篇關于vue3項目中引入ts的文章就介紹到這了,更多相關vue3項目引入ts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue+swiper實現(xiàn)側(cè)滑菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
關于vue-admin-element中的動態(tài)加載路由
這篇文章主要介紹了關于vue-admin-element的動態(tài)加載路由，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue使用Less與Scss實現(xiàn)主題切換方法詳細講解
目前，在眾多的后臺管理系統(tǒng)中，換膚功能已是一個很常見的功能。用戶可以根據(jù)自己的喜好，設置頁面的主題，從而實現(xiàn)個性化定制。目前，我所了解到的換膚方式，也是我目前所掌握的兩種換膚方式，想同大家一起分享2023-02-02
這篇文章主要介紹了vue中常見循環(huán)遍歷指令的使用 v-for，包括v-for遍歷數(shù)組，v-for遍歷json對象,本文給大家介紹的非常詳細，需要的朋友可以參考下2018-04-04
uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動態(tài)傳參代碼示例
最近外部公司的app要接入我司的uni H5項目,所以這篇文章主要給大家介紹了關于uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動態(tài)傳參的相關資料,需要的朋友可以參考下2024-04-04
vue版本升級相信大家應該都遇到過,下面這篇文章主要給大家介紹了關于Vue版本vue2.9.6升級到vue3.0的詳細步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了VueJs組件之父子通訊的方式，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
本文主要介紹了Vue中如何實現(xiàn)動態(tài)路由的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要為大家介紹了Vue使用Prism實現(xiàn)頁面代碼高亮展示示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
vue 實現(xiàn)可拖曳的樹狀結(jié)構(gòu)圖
這篇文章主要介紹了vue 實現(xiàn)可拖曳的樹狀結(jié)構(gòu)圖，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04