看到了这篇文章。。。。。

背景

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

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

这样引入

修改element-ui的index.d.ts （此步骤可以不修改）

// export * from './element-ui'
import * as ElementUI from './element-ui'
// export default ElementUI
export = ElementUI

添加css的loader

image.png

复制以下代码：

{
  test: /\.css$/,
  use: [{
    loader: 'style-loader'
  },
  {
    loader: 'css-loader'
  },
  ]
},

完事...顺便通过修改element-ui的index.d.ts（后期发现此步骤不修改也可以）和添加css的loader的方法解决了之前引入element解决样式不想显示的问题

参考文章：
Vue 2.0 项目创建+Element-ui+Less+typescript[巨详细+巨简单+踩过的一些小坑
https://segmentfault.com/a/1190000009890826
vue 集成 typescript Element UI 之懒人集成法
https://blog.csdn.net/qq_24736253/article/details/79070571