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

背景

最近有点时间,就想把我的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里

《vue 集成 typescript Element UI 之懒人集成法》
这样引入

修改element-ui的index.d.ts

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

添加css的loader

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

完事…

文件目录结构

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

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

    原文作者:fuqihan
    原文地址: https://segmentfault.com/a/1190000012840792
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞