看到了這篇文章。。。。。

背景

最近有點(diǎn)時(shí)間，就想把我的vue項(xiàng)目版本升級(jí)一下，順便在折騰一下typescript...
踩過(guò)的坑
element ui官方已經(jīng)寫了d.ts，但會(huì)有一個(gè)小坑，但issue都有解決方案...

正文

vue引入ts有好幾種方案，一種引入是還是在.vue文件里寫，不過(guò)是集成之后在<script>里加個(gè)lang="ts"。一種是寫在.ts文件中，我用的就是這一種....

引入方式極其簡(jiǎn)單，使用這個(gè)vue-webpack-typescript

步驟

1: 安裝vue-cli

npm i vue-cli -g

2: 創(chuàng)建模板

vue init ducksoupdev/vue-webpack-typescript my-project

3: 安裝依賴

npm i
因?yàn)檫@個(gè)模板用的是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

復(fù)制以下代碼：

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

完事...順便通過(guò)修改element-ui的index.d.ts（后期發(fā)現(xiàn)此步驟不修改也可以）和添加css的loader的方法解決了之前引入element解決樣式不想顯示的問(wèn)題

參考文章：
Vue 2.0 項(xiàng)目創(chuàng)建+Element-ui+Less+typescript[巨詳細(xì)+巨簡(jiǎn)單+踩過(guò)的一些小坑
https://segmentfault.com/a/1190000009890826
vue 集成 typescript Element UI 之懶人集成法
https://blog.csdn.net/qq_24736253/article/details/79070571