脚本宝典收集整理的这篇文章主要介绍了Vue全家桶+TypeScript使用总结,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近重构了我之前项目 qq 音乐移动端,使用的技术是 vue,vuex,vue-router,和 typescript,在这期间,遇到的问题还是蛮多的,一会儿我会把我遇到的问题以及解决方法列出来,避免忘记。
重构完成的项目 ===> vue-qq-music
TypeScript与Vue全家桶的配置可以参考以下两篇文章(在这里由衷感谢两位作者):
为什么我要将TypeScript
和 Vue
集成呢?因为TypeScript 有以下几个优势:
ts 无法识别$ref
解决方法
① 直接在 this.$refs.xxx 后面申明类型如:
this.$refs.lyricsLines as HTMLDivElement;
② 在export default class xxx extends Vue
里面声明全部的$ref 的类型
$refs: {
audio: HTMLAudioElement,
lyricsLines: HTMLDivElement
}
ts 无法识别 require
解决方法
安装声明文件
yarn add @types/webpack-env -D
运行npm run build
出现
解决方法
You can fix this by using the most recent beta version ofuglifyjs-webpack-plugin
. Our team is working to remove completely the UglifyJsPlugin from within webpack, and instead have it as a standalone plugin.If you do
yarn add uglifyjs-webpack-plugin@beta --dev
ornpm install uglifyjs-webpack-plugin@beta --save-dev
you should receive the latest beta which does successfully minify es6 syntax. We are hoping to have this released from beta extremely soon, however it should save you from errors for now!
也就是说升级你的uglifyjs-webpack-plugin版本:yarn add uglifyjs-webpack-plugin@beta --dev
vue-property-decorator 装饰器写法不对。当时我是要把 mixins,注入到组件里,我就这样写:
ts提示找不到 mixin。我就很纳闷为什么找不到名字,由于官网vue-property-decorator例子太少,只好一步一步摸索?
解决方法
把mixins写在@Component里面...,像这样:
Property '$xxx' does not exist on type 'App'
的话,那么可以在vue-shim.d.ts
增加declare module 'vue/types/vue' {
interface Vue {
$xxx: any,
}
}
经过几天的折腾,终于把项目重构完成,我个人认为加上 TypeScript
,确实效率挺高了许多,不过 Vue+TypeScript
还是没 Angular
支持那么完善,相信之后 vue 对于 ts 的集成会更加完善!
以上是脚本宝典为你收集整理的Vue全家桶+TypeScript使用总结全部内容,希望文章能够帮你解决Vue全家桶+TypeScript使用总结所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。