Vue3.0常用代码片段和开发插件

时间：2024-02-01 20:13:39

Vue3 Snippets for Visual Studio Code

This extension adds Vue3 Code Snippets into Visual Studio Code.

这个插件基于最新的 Vue3 的 API 添加了 Code Snippets。

Snippets / 代码片段

Including most of the API of Vue3. You can type reactive, choose reactive, and press ENTER, then const data = reactive({...}) appear on the screen.

插件的 Snippets 如下表格所示，比如你可以键入 reactive 然后按上下键选中 reactive 再按 Enter 键，就输入了const data = reactive({...})了。

Prefix JavaScript Snippet Content
import import {...} from "@vue/composition-api"
import import {...} from 'vue'
newVue newVue({...})
createComponent createComponent({...})
export export default { ... }
setup setup(${...}) {...}
reactive const data = reactive({...})
watch watch(..., ...)
watchFn watch(() => {...})
computed computed(() => { get: () => {...}, set: () => {...}})
toRefs toRefs(...)
ref ref(...)
props props(...)
onBeforeMount onBeforeMount(...)
onMounted onMounted(...)
onBeforeUpdate onBeforeUpdate(...)
onUpdated onUpdated(...)
onBeforeUnmount onBeforeUnmount(...)
onUnmounted onUnmounted(...)
onErrorCaptured onErrorCaptured(...)

Vue Composition API

Vue Composition API

@vue/composition-api 使开发者们可以在 Vue 2.x 中使用 Vue 3.0 引入的基于函数的逻辑复用机制。

English Version

Navigation

Installation

npm

npm install @vue/composition-api --save

yarn

yarn add @vue/composition-api

CDN

<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>

By using the global variable window.vueCompositionApi.

通过全局变量 window.vueCompositionApi 来使用。

Usage

You must install @vue/composition-api via Vue.use() before using other APIs:

在使用任何 @vue/composition-api 提供的能力前，必须先通过 Vue.use() 进行安装:

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

After installing the plugin you can use the Composition API to compose your component.

安装插件后，您就可以使用新的 Composition API 来开发组件了。

TypeScript

This plugin requires TypeScript version >3.5.1. If you are using vetur, make sure to set vetur.useWorkspaceDependencies to true.

To let TypeScript properly infer types inside Vue component options, you need to define components with createComponent:

请使用最新版的 TypeScript，如果你使用了 vetur，请将 vetur.useWorkspaceDependencies 设为 true。

为了让 TypeScript 正确的推导类型，我们必须使用 createComponent 来定义组件:

import { createComponent } from '@vue/composition-api';

const Component = createComponent({
  // 启用类型推断
});

const Component = {
  // 无法进行选项的类型推断
  // TypeScript 无法知道这是一个 Vue 组件的选项对象
};

TSX

相关文章