Vue snippets插件原理與使用介紹
vue-snippets
隨著開發(fā)者的年限的增加,不僅頭發(fā)有點(diǎn)少,重復(fù)的代碼也不斷的增多,為了能夠少寫代碼,GitHub友好的給我們提供了智能代碼提示,而我們也以友好的方式贊助它,當(dāng)然也有很多開發(fā)者寫了類似的插件。
那我為什么要寫呢?
我想要有適合自己的代碼片段,同時(shí)也支持更多的代碼片段,更加方便開發(fā)者快速使用。
snippets是什么
snippets簡(jiǎn)單來說就是代碼片段,比如你想實(shí)現(xiàn)下面這段代碼
<div v-for="item in items" :key="item.id"> {{ item }} </div>
那你每次重新手敲,是不是很麻煩,沒有snippets的話那么你需要每個(gè)都手寫
而當(dāng)你使用snippets的時(shí)候,那么你可以直接使用vfor-arr
并且寫的時(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的語法的代碼模板
2. 支持模板語法
使用vfor-arr
可以快速生成for
循環(huán)的代碼
<div v-for="item in items" :key="item.id"> {{ item }} </div>
支持vue script語法使用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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue將props值實(shí)時(shí)傳遞 并可修改的操作
這篇文章主要介紹了Vue將props值實(shí)時(shí)傳遞 并可修改的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue中的$emit 與$on父子組件與兄弟組件的之間通信方式
本文主要對(duì)vue 用$emit 與 $on 來進(jìn)行組件之間的數(shù)據(jù)傳輸。重點(diǎn)給大家介紹vue中的$emit 與$on父子組件與兄弟組件的之間通信方式,感興趣的朋友一起看看2018-05-05Vue2.0用 watch 觀察 prop 變化(不觸發(fā))
本篇文章主要介紹了Vue2.0用 watch 觀察 prop 變化(不觸發(fā)),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09vue項(xiàng)目中如何配置eslint和prettier
這篇文章主要介紹了vue項(xiàng)目中如何配置eslint和prettier問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能
這篇文章主要介紹了vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01