enpitsulin

enpitsulin

这个人很懒,没有留下什么🤡
twitter
github
bilibili
nintendo switch
mastodon

在Vue2项目中使用composition-api和setup

公司项目除了由我创建的基本都是 Vue2 项目,众所周知 Vue2 原先的插件 Vetur 需要开启"vetur.experimental.templateInterpolationService"选项才能提供模板中代码补全的能力,增加@vue/composition-api也是可以使用的,但是增加上用于解决使用 composition-api 造成 return 的变量过多问题的unplugin-vue2-script-setup就不太好使了,所以需要引入一些东西来增强这种开发环境下的体验。

Vue2 使用 composition-api#

在 Vue3 还没正式发布的时候 vue2 就有@vue/composition-api来支持在 vue2 中使用组合式 api 了。

@vue/composition-api

按照文档中的给出的配置就可以使用了

增加对 Vue2 的 setup 语法糖支持#

unplugin-vue2-script-setup是 vue 团队核心成员Anthony Fu基于他自己开发的对 Rollup 和 webpack 插件的兼容工具开发的一个让 Vue2 项目也能使用 setup 语法糖甚至于 ref 语法糖的插件,具体使用方法可以去仓库里看。

但是使用上这个插件后,Vetur 的提示功能基本就下线了 而且会提示没有默认导出,开发体验不是很好,接下来就是请出 Vue3 推荐的 Volar 了

使用 Volar#

虽然是 Vue3 专用的插件但是支持 Vue2 也是没问题的。

首先 Volar 是使用@vue/runtime-dom来获得对 Vue 文件的类型检查,而 Vue2 中没有这个包,所以我们需要手动安装

npm install -D @vue/runtime-dom

然后在项目的 jsconfig.json 中增加下面两个设置

{
  "compilerOptions": {
    "types": ["unplugin-vue2-script-setup/types"],
  },
  "vueCompilerOptions": {
    "experimentalCompatMode": 2
  }
}

关闭 Vetur 开启 Volar 然后等待 Vue language server 启动,打开 Vue 文件应该能享受到更加美好的开发体验了。

一点不足#

对于 setup 语法糖引入的组件 Volar 不能很好的对其做出正确的代码染色和类型补全,所以我建议将对组件的命名和子组件引入分开到另一个 script 代码块,如

<script>
import { defineComponent } from '@vue/composition-api'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: { HelloWorld },
})
</script>
<script setup>
import { ref } from '@vue/composition-api'

const count = ref(0)
const countAdd = () => {
  count.value++
}
</script>

因为反正都要将组件命名的,正好也能解决这个小问题,那就这样吧

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。