看到了这篇文章。。。。。
背景
最近有点时间,就想把我的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
复制以下代码:
{
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