Vue 3和 TypeScript的知识小结

Alan

4 年前

代码格式化

冲突解决：

# .prettierrc
{
  "trailingComma": "none",
  "semi": false,
  "singleQuote": true
}

# eslintrc.js
  rules: {
    ...
    'space-before-function-paren': 'off'
  }

# .prettierrc

{

"trailingComma": "none",

"semi": false,

"singleQuote": true

}

# eslintrc.js

rules: {

...

'space-before-function-paren': 'off'

}

常用代码包

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 进行定义，即可直接使用对应值

<div ref="xxxRef">

<script lang='ts'>
  setup () {
    const xxxRef = ref<null | HTMLElement>(null)
    return {
      xxxRef
    }
  }
</script>

setup () {

const xxxRef = ref<null | HTMLElement>(null)

return {

xxxRef

}

</script>

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

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

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

{
  "eslint.validate": [
    "typescript"
  ]
}

{

"eslint.validate": [

"typescript"

]

}

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

beforeCreate -> 不需要 // 使用setup()
created -> 不需要  // 使用setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered

beforeCreate -> 不需要 // 使用setup()

created -> 不需要 // 使用setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeUnmount -> onBeforeUnmount

unmounted -> onUnmounted

errorCaptured -> onErrorCaptured

renderTracked -> onRenderTracked

renderTriggered -> onRenderTriggered

新增onRenderTracked, onRenderTriggered

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

"vetur.experimental.templateInterpolationService": true,

1	"vetur.experimental.templateInterpolationService": true,

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

Sass 版本过高

"sass-loader": "^10"

1	"sass-loader": "^10"

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

npm install less-loader@6.0.0

1	npm install less-loader@6.0.0

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

npm install --save-dev webpack@4

1	npm install --save-dev webpack@4

Cannot find module ‘swiper/bundle’

"swiper": "^6.0.0",

1	"swiper": "^6.0.0",

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

yarn add vue-router@3
npm install vue-router@3

1 2	yarn add vue-router@3 npm install vue-router@3

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

const {merge} = require('webpack-merge')

1	const {merge} = require('webpack-merge')

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

// devtool: 'cheap-module-eval-source-map' 修改为
devtool: 'eval-cheap-module-source-map'

1 2	// devtool: 'cheap-module-eval-source-map' 修改为 devtool: 'eval-cheap-module-source-map'

补充链接

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