Vuesnippets插件原理与使用介绍
vue-snippets
随着开发者的年限的增加，不仅头发有点少，重复的代码也不断的增多，为了能够少写代码，GitHub友好的给我们提供了智能代码提示，而我们也以友好的方式赞助它，当然也有很多开发者写了类似的插件。
那我为什么要写呢？
我想要有适合自己的代码片段，同时也支持更多的代码片段，更加方便开发者快速使用。
snippets是什么
snippets简单来说就是代码片段，比如你想实现下面这段代码
<div v-for="item in items" :key="item.id">
{{ item }}
</div>
那你每次重新手敲，是不是很麻烦，没有snippets的话那么你需要每个都手写
而当你使用snippets的时候，那么你可以直接使用vfor-arr并且写的时候还有提示，方便快速查看和使用（得益于vscode插件的功能）
很多人会在本地settings里面设置对应的一些基础片段，但是毕竟数量太多了，所以装插件是比较方便使用的。
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的语法的代码模板
2. 支持模板语法
使用vfor-arr可以快速生成for循环的代码
<div v-for="item in items" :key="item.id">
{{ item }}
</div>
支持vue script语法使用vref可以快速生成如下代码
const name = ref(initialValue)支持vue-router相关代码比如使用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相关代码使用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` 组合式函数
export function useStore () {
return baseUseStore(key)
}更多的文档请查看vue-3-snippets
目前支持以上这些功能，如果有需要更多的功能请前往vue-3-snippets提交issue 当然也欢迎提交pr
希望这个snippets能帮助到大家。
到此这篇关于Vue snippets原理与使用介绍的文章就介绍到这了,更多相关Vue snippets内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
