vue 集成 typescript Element UI 之懒人集成法

本文分享了将Vue项目升级并集成TypeScript的过程。详细介绍了使用vue-webpack-typescript模板进行项目初始化、安装依赖、集成Element UI及修改相关配置的具体步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景

最近有点时间,就想把我的vue项目版本升级一下,顺便在折腾一下typescript...

踩过的坑

element ui官方已经写了d.ts,但会有一个小坑,但issue都有解决方案...

正文
vue引入ts有好几种方案,一种引入是还是在.vue文件里写,不过是集成之后在<script>里加个lang="ts"。一种是写在.ts文件中,我用的就是这一种....

引入方式极其简单,使用这个vue-webpack-typescript

步骤

1: 安装vue-cli
npm i vue-cli -g

2: 创建模板
vue init ducksoupdev/vue-webpack-typescript my-project

3: 安装依赖
npm i
因为这个模板用的是sass,可以使用
npm i cnpm -g
cnpm i node-sass -g
安装node-sass

4: 集成element ui
在main.ts里

clipboard.png
这样引入

修改element-ui的index.d.ts

clipboard.png

添加css的loader

clipboard.png

完事...

文件目录结构

clipboard.png

还想把我的vux项目也换成ts的,然鹅...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值