博客列表 >Vue2 composition-api 升级

Vue2 composition-api 升级

P粉962186587
P粉962186587原创
2022年03月17日 20:30:521390浏览

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

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

支持 composition-api
本插件要求使用 TypeScript 4.2 或以上版本
安装@vue/composition-api依赖。

  1. yarn add @vue/composition-api

在项目中添加以下配置

  1. import Vue from 'vue'
  2. import VueCompositionApi from '@vue/composition-api'
  3. Vue.use(VueCompositionApi)
  1. 更多内容:vue/composition-api
  2. 支持<script setup>语法
  3. <script setup>是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖,是 Vue3.2 新加入的语法。那么,我们也可以在 Vue2 项目中使用它。文档
  4. 需要安装unplugin-vue2-script-setup依赖。
  1. yarn add unplugin-vue2-script-setup -D

项目里使用的是webpack,所以需要在配置中加上

  1. // webpack.config.js
  2. const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
  3. module.exports = {
  4. /* ... */
  5. plugins: [
  6. ScriptSetup({ /* options */ }),
  7. ]
  8. }

其他的一些打包工具使用方式,可以查看 unplugin-vue2-script-setup。

在 Vue2 项目中使用 Volar
以下是官方的解释:

我们建议将 VS Code 与 Volar 结合使用以获得最佳体验(如果您拥有 Vetur,您可能希望禁用它)。 使用 Volar 时,您需要安装 @vue/runtime-dom 作为 devDependencies 以使其在 Vue 2 上工作。

  1. yarn add @vue/runtime-dom -D

支持 TypeScript 语法
tsconfig.json
tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。

这里需要注意 IDE 会提示缺少全局类型。那么需要添加以下配置

  1. {
  2. "compilerOptions": {
  3. "types": [
  4. "unplugin-vue2-script-setup/types"
  5. ]
  6. }
  7. }

Volar 优先支持 Vue 3。Vue 3 和 Vue 2 模板有些不同。项目中需要设置 ExperimentCompatMode 选项以支持 Vue 2 模板。

  1. {
  2. "compilerOptions": {
  3. ...
  4. },
  5. "vueCompilerOptions": {
  6. "experimentalCompatMode": 2
  7. },
  8. }

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 各种方法

未使用插件前

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

使用之后

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

安装

  1. npm i -D unplugin-auto-import

使用
在 webpack 中使用,其他打包工具的配置可以在 Github 上找到。

  1. // webpack.config.js
  2. module.exports = {
  3. /* ... */
  4. plugins: [
  5. require('unplugin-auto-import/webpack')({ /* options */ }),
  6. ],
  7. }

ESlint配置
项目使用插件后,可能会出现 no-undef 的报错。那么需要在 .eslintrc.js 中添加以下配置

  1. // .eslintrc.js
  2. module.exports = {
  3. /* ... */
  4. extends: [
  5. // ...
  6. './.eslintrc-auto-import.json',
  7. ],
  8. }

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

以上就是全部内容,希望对大家有所帮助

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议