Alan Hou的个人博客

Vue 3和 TypeScript的知识小结

代码格式化

冲突解决:

常用代码包

Vue 3官方文档:https://v3.vuejs.org/

安装 Vue 3要求vue-cli的版本在4.5.13(vue -V)

1、Vue 3中 TypeScript this 的报错问题

核心问题还是类型的问题,一种方法是将 this 修改为(this as any)可解决此问题,此外如在定义变量时使用 ref 进行定义,即可直接使用对应值

VSCode 中的常用的插件:Eslint, Vetur

2、ESlint 对 TypeScript 检查不生效的问题

创建.vscode 文件夹,在其中创建 settings.json并添加如下内容:

3、Vue 2与 Vue 3生命周期函数对照

新增onRenderTracked, onRenderTriggered

4、 VSCode在模板中实现TypeScript 的自动补全:Vetur 插件配置中选择Extension Settings > Edit in settings.json添加如下设置:

5、TypeError: this.getOptions is not a function at Object.loader

Sass 版本过高

TypeError: this.getOptions is not a function at Object.lessLoader

6、Rule can only have one resource source (provided resource and test + include + exclude) in { “use”:

Cannot find module ‘swiper/bundle’

7、Uncaught TypeError: Object(…) is not a function
这是由于 Vue 2和最新版本的vue-router存在兼容性问题,所以需阶级至3.x

8、 TypeError: merge is not a function:将 merge 改为{merge}

9、configuration.devtool should match pattern “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)

 

 

补充链接

 

提升90%加载速度——vuecli下的首屏性能优化
vue——项目优化,缩短首屏加载时间

退出移动版