Vue2 composition-api 升级

在 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

支持

使用之后

安装

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