关于javascript:Vue2-compositionapi-升级

在 Vue2.x 版本的我的项目中,取得和 Vue3.0 中一样的开发体验。

composition-api 字面意思是组合 API,它是为了实现基于函数的逻辑复用机制而产生的。这也是 Vue3 亮点之一,那么咱们如何才可能在 Vue2 我的项目中应用呢?

反对 composition-api

本插件要求应用 TypeScript 4.2 或以上版本

装置@vue/composition-api依赖。

yarn add @vue/composition-api

在我的项目中增加以下配置

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

更多内容:vue/composition-api

反对<script setup>语法

<script setup>是在单文件组件 (SFC) 中应用组合式 API 的编译时语法糖,是 Vue3.2 新退出的语法。那么,咱们也能够在 Vue2 我的项目中应用它。文档

须要装置unplugin-vue2-script-setup依赖。

yarn add unplugin-vue2-script-setup -D

我的项目里应用的是webpack,所以须要在配置中加上

// webpack.config.js
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
module.exports = {
  /* ... */
  plugins: [
    ScriptSetup({ /* options */ }),
  ]
}

其余的一些打包工具应用形式,能够查看 unplugin-vue2-script-setup。

在 Vue2 我的项目中应用 Volar

以下是官网的解释:

咱们倡议将 VS Code 与 Volar 联合应用以获得最佳体验(如果您领有 Vetur,您可能心愿禁用它)。 应用 Volar 时,您须要装置 @vue/runtime-dom 作为 devDependencies 以使其在 Vue 2 上工作。

yarn add @vue/runtime-dom -D

反对 TypeScript 语法

tsconfig.json

tsconfig.json文件中指定了用来编译这个我的项目的根文件和编译选项。

这里须要留神 IDE 会提醒短少全局类型。那么须要增加以下配置

{
  "compilerOptions": {
    "types": [
      "unplugin-vue2-script-setup/types"
    ]
  }
}

Volar 优先反对 Vue 3。Vue 3 和 Vue 2 模板有些不同。我的项目中须要设置 ExperimentCompatMode 选项以反对 Vue 2 模板。

{
  "compilerOptions": {
    ...
  },
  "vueCompilerOptions": {
    "experimentalCompatMode": 2
  },
}

ESLint

如果我的项目中应用了 ESLint,可能会呈现带有 <script setup> 的 @typescript-eslint/no-unused-vars 正告。

倡议能够禁用它:在 tsconfig.json 中增加 noUnusedLocals: true 。Volar 会正确推断出真正不通过ESlint 校验的那一部分。

unplugin-auto-import 主动按需引入

在 <script setup>须要手动 import 各种办法, unplugin-auto-import 会依据代码中应用到的内容,主动引入 Vue 各种办法

未应用插件前

<script setup>
import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>

应用之后

<script setup>
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>

装置

npm i -D unplugin-auto-import

应用

webpack 中应用,其余打包工具的配置能够在 Github 上找到。

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack')({ /* options */ }),
  ],
}

ESlint配置

我的项目应用插件后,可能会呈现 no-undef 的报错。那么须要在 .eslintrc.js 中增加以下配置

// .eslintrc.js

module.exports = {
  /* ... */
  extends: [
    // ...
    './.eslintrc-auto-import.json',
  ],
}

注:.eslintrc-auto-import.json 是主动生成的。如果配置文件批改没有及时失效,请查看配置文件、重启 ESlint 服务或者编辑器。

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据