乐趣区

关于javascript:Vue2-compositionapi-升级

jiezi

在 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 服务或者编辑器。

退出移动版