vue2项目引入ts实操记录(一)

背景：

vue2+ElementUi

原因：

之所以要在vue2中引入ts，是为了规范项目，更是为了后面学习vue3+ts做准备。

移入ts修改思路：

先修改.vue文件-----------再修改全局工具类.js文件-----待续。。。

正式内容：

第一步安装引入：

npm install typescript ts-loader --save-dev

npm install vue-property-decorator --save-dev

进行配置：vue.config.js中，网上很多，可自行配置

新建ts配置文件：tsconfig.json,与vue.config.js同目录下

// 字段的含义可以参考官网
{"compilerOptions": {"target": "esnext","module": "esnext","strict": true,"importHelpers": true,"moduleResolution": "node","experimentalDecorators": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"sourceMap": true,"baseUrl": ".","allowJs": true,"noEmit": true,"typeRoots": ["./src/types", // 自定义的types目录"./node_modules/@types" // 引入基础的types，一部分第三方库声明会安装在此目录，可以自行定义需要使用的],"paths": {"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]},"exclude": ["node_modules"]}

第二步，新建全局声明文件.d.ts

// src/types/vue-shims.d.tsdeclare module '*.vue' {import Vue from 'vue'export default Vue // 这里目的是为了让ts能识别.vue文件(我是这样理解的)
}

// src/types/lib.d.ts
import { UtilInterface } from '@/libs/types/util' // 工具函数接口declare module 'vue/types/vue' {interface Vue {$util: UtilInterface, //这样声明，可在全局使用this.$util$baseUrl: string,}
}

新建好声明文件后，要让ts执行，那么就要修改配置文件：

// tsconfig.json
"typeRoots": ["./src/types", // 这里包含src/types下所有的.d.ts声明文件"./node_modules/@types"],

展示一个已经改好的.vue文件

当你把你的工具类.js文件改为.ts后，你引入的第三方包可能会报错，那是因为.ts文件在检验的时候，它不认识你引入的包，没有声明这个包的类型，所以要下载对应的声明类型的包，比如：

npm i lowdb // 第三方包
npm i @types/lowdb --save-dev // 声明文件

https://www.typescriptlang.org/dt/search?search=

上面这个链接中可以搜索一下第三方包。

如果没有第三方包，那么自己就新建一个.d.ts文件进行声明。

待续。。。。。。。。。

vue2项目引入ts实操记录(一)相关推荐

CRM项目开发【实操篇----市场活动模块】
CRM项目开发[实操篇----市场活动模块] 前言:本项目来源于B站动力节点视频,CRM项目开发使用的后端技术栈主要是SSM框架,不涉及boot,老师讲的非常细致,推荐关于流程图部分,由于是老师创 ...
excel 两组数据交点_如何在百万级的数据里找到别人正在赚钱的项目？【实操长文】...
前不久,我在好友的知乎星球看到了这篇知乎文章,后面又在生财有术星球看到了原作者小曾分享.更巧的是,小曾也在白杨SEO星球嘉宾令狐峰的极客微信群里,所以就这样认识了. 君言这篇文章,我详细看过了,真心很 ...
oracle 读懂10046视频,10046、10053、实操记录
10046是一个Oracle的内部事件(event),通过设置这个事件可以得到Oracle内部执行系统解析.调用.等待.绑定变量等详细的trace信息,即帮助我们解析一条/多条SQL.PL/SQL语句 ...
CNN实操记录（goal：一日一更新）
导师说:"最快的学习方式是看别人的博客,然后实操.你需要实操." 开始进行CNN实操记录!尽量一日一更新,依照忙的程度进行略微调整,看能坚持多久!争取在下个月汇报前做出点东西. - ...
vite+vue3+TS项目引入antd-vue的问题记录
文章目录 1.vite创建的vue+TS项目引入antd-vue 2.antd-vue定制主题报错记录博,用于记录Vue3项目中遇到的问题 1.vite创建的vue+TS项目引入antd-vue 由 ...
python引入redis_实操演练解读非关系型数据库—Redis
在互联网发展的早期,那还是一个各路军阀混战,实战为王的时代,没有所谓正规军,搞定问题才是王道. 当然,那个时期也没有那么多问题,互联网还是个新鲜的词汇,能被称作是网民的人也都是"稀有物种&q ...
Debian11安装Proxmox VE 7实操记录
目录 Debian11安装Proxmox VE 7,以下皆为作者借鉴官网教程实操并记录 IP 地址添加 /etc/hosts 使用hostname --ip-address命令测试设置是否正常设置D ...
抖音极速版/快手极速版自动浏览-实操记录
根据作者繁梦溪所写教程抖音极速版/快手极速版自动浏览进行实际操作,记录其中跳入的坑,具体步骤可点进作者繁梦溪文章查看. 步骤1:安装Python需要的包 1.1 电脑安装Android SDK Pla ...
数据导出系统WeBankBlockchain-Data-Export实操记录
实操人:施绍求概述: WeBankBlockchain-Data-Export是一款基于FISCO BCOS平台的数据导出工具,可以把非结构化的链上数据导出到关系型数据库或ES等数据源中存储,便于后 ...

vue2项目引入ts实操记录(一)

背景：

原因：

移入ts修改思路：

正式内容：

vue2项目引入ts实操记录(一)相关推荐

最新文章

热门文章