快捷導(dǎo)航

Vue snippets插件原理與使用介紹

更新時(shí)間：2022年10月24日 15:09:56 作者：cyg_l02

這篇文章主要介紹了Vue snippets插件原理與使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

vue-snippets

隨著開(kāi)發(fā)者的年限的增加，不僅頭發(fā)有點(diǎn)少，重復(fù)的代碼也不斷的增多，為了能夠少寫(xiě)代碼，GitHub友好的給我們提供了智能代碼提示，而我們也以友好的方式贊助它，當(dāng)然也有很多開(kāi)發(fā)者寫(xiě)了類似的插件。

那我為什么要寫(xiě)呢？

我想要有適合自己的代碼片段，同時(shí)也支持更多的代碼片段，更加方便開(kāi)發(fā)者快速使用。

snippets是什么

snippets簡(jiǎn)單來(lái)說(shuō)就是代碼片段，比如你想實(shí)現(xiàn)下面這段代碼

<div v-for="item in items" :key="item.id">
  {{ item }}
</div>

那你每次重新手敲，是不是很麻煩，沒(méi)有snippets的話那么你需要每個(gè)都手寫(xiě)

而當(dāng)你使用snippets的時(shí)候，那么你可以直接使用vfor-arr并且寫(xiě)的時(shí)候還有提示，方便快速查看和使用（得益于vscode插件的功能）

很多人會(huì)在本地settings里面設(shè)置對(duì)應(yīng)的一些基礎(chǔ)片段，但是畢竟數(shù)量太多了，所以裝插件是比較方便使用的。

vue-3-snippets插件支持的功能

支持快速定義vue的模板

使用vbase可以快速生成一下代碼

<script lang="ts" setup>
import { ref } from 'vue'
</script>
<template>
  <div>
  </div>
</template>
<style lang="scss" scoped>
</style>

還支持使用tsx和render的語(yǔ)法的代碼模板

2. 支持模板語(yǔ)法

使用vfor-arr可以快速生成for循環(huán)的代碼

<div v-for="item in items" :key="item.id">
  {{ item }}
</div>

支持vue script語(yǔ)法使用vref可以快速生成如下代碼

const name = ref(initialValue)

支持vue-router相關(guān)代碼比如使用vrouter-beforeRouteEnter指令可以快速生成如下代碼

beforeRouteEnter(to, from, next) {
  // called before the route that renders this component is confirmed.
  // does NOT have access to `this` component instance, because it has not been created yet when this guard is called!
  // can call `next`...
}

支持vuex相關(guān)代碼使用vuexbase-type可以快速生成vuex的配置模板并且還帶typescript

import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
export interface State {
  count: number
}
export const key: InjectionKey<Store<State>> = Symbol()
export const store = createStore<State>({
  state: {
    count: 0
  }
})
// 定義自己的 `useStore` 組合式函數(shù)
export function useStore () {
  return baseUseStore(key)
}

更多的文檔請(qǐng)查看vue-3-snippets

目前支持以上這些功能，如果有需要更多的功能請(qǐng)前往vue-3-snippets提交issue 當(dāng)然也歡迎提交pr

希望這個(gè)snippets能幫助到大家。

到此這篇關(guān)于Vue snippets原理與使用介紹的文章就介紹到這了,更多相關(guān)Vue snippets內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: