Vue snippets插件原理与使用介绍

 更新时间:2022年10月24日 15:09:56   作者:cyg_l02  
这篇文章主要介绍了Vue snippets插件原理与使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 表单输入格式化中文输入法异常问题

    vue 表单输入格式化中文输入法异常问题

    v-model 是 vue.js 提供的语法糖,根据不同的表单控件监听不同的事件,实现对表单控件的数据双向绑定。这篇文章主要介绍了vue 表单输入格式化中文输入法异常,需要的朋友可以参考下
    2018-05-05
  • Vue如何指定不编译的文件夹和favicon.ico

    Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue将props值实时传递 并可修改的操作

    Vue将props值实时传递 并可修改的操作

    这篇文章主要介绍了Vue将props值实时传递 并可修改的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue-cli3设置代理无效的解决

    vue-cli3设置代理无效的解决

    这篇文章主要介绍了vue-cli3设置代理无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vuex新手进阶篇之取值

    vuex新手进阶篇之取值

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于vuex新手进阶篇之取值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • vue中的$emit 与$on父子组件与兄弟组件的之间通信方式

    vue中的$emit 与$on父子组件与兄弟组件的之间通信方式

    本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输。重点给大家介绍vue中的$emit 与$on父子组件与兄弟组件的之间通信方式,感兴趣的朋友一起看看
    2018-05-05
  • vue-router 组件复用问题详解

    vue-router 组件复用问题详解

    本篇文章主要介绍了vue-router 组件复用问题详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue2.0用 watch 观察 prop 变化(不触发)

    Vue2.0用 watch 观察 prop 变化(不触发)

    本篇文章主要介绍了Vue2.0用 watch 观察 prop 变化(不触发),非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • vue项目中如何配置eslint和prettier

    vue项目中如何配置eslint和prettier

    这篇文章主要介绍了vue项目中如何配置eslint和prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue+vant实现商品列表批量倒计时功能

    vue+vant实现商品列表批量倒计时功能

    这篇文章主要介绍了vue+vant实现商品列表批量倒计时功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01

最新评论