Vue snippets插件原理与使用介绍_vue.js_

vue-snippets

随着开发者的年限的增加，不仅头发有点少，重复的代码也不断的增多，为了能够少写代码，GitHub友好的给我们提供了智能代码提示，而我们也以友好的方式赞助它，当然也有很多开发者写了类似的插件。

那我为什么要写呢？

我想要有适合自己的代码片段，同时也支持更多的代码片段，更加方便开发者快速使用。

snippets是什么

snippets简单来说就是代码片段，比如你想实现下面这段代码

 {{ item }} 

那你每次重新手敲，是不是很麻烦，没有snippets的话那么你需要每个都手写

而当你使用snippets的时候，那么你可以直接使用vfor-arr并且写的时候还有提示，方便快速查看和使用（得益于vscode插件的功能）

很多人会在本地settings里面设置对应的一些基础片段，但是毕竟数量太多了，所以装插件是比较方便使用的。

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

支持快速定义vue的模板

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

还支持使用tsx和render的语法的代码模板

2. 支持模板语法

使用vfor-arr可以快速生成for循环的代码

 {{ item }} 

支持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> = Symbol() export const store = createStore({ state: { count: 0 } }) // 定义自己的 `useStore` 组合式函数 export function useStore () { return baseUseStore(key) }

更多的文档请查看vue-3-snippets

目前支持以上这些功能，如果有需要更多的功能请前往vue-3-snippets提交issue 当然也欢迎提交pr

希望这个snippets能帮助到大家。

到此这篇关于Vue snippets原理与使用介绍的文章就介绍到这了,更多相关Vue snippets内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！