在 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.jsconst ScriptSetup = require('unplugin-vue2-script-setup/webpack').defaultmodule.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.jsmodule.exports = { /* ... */ plugins: [ require('unplugin-auto-import/webpack')({ /* options */ }), ],}ESlint配置
我的项目应用插件后，可能会呈现 no-undef 的报错。那么须要在 .eslintrc.js 中增加以下配置
// .eslintrc.jsmodule.exports = { /* ... */ extends: [ // ... './.eslintrc-auto-import.json', ],}注：.eslintrc-auto-import.json 是主动生成的。如果配置文件批改没有及时失效，请查看配置文件、重启 ESlint 服务或者编辑器。