欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue snippets插件原理與使用介紹

 更新時(shí)間:2022年10月24日 15:09:56   作者:cyg_l02  
這篇文章主要介紹了Vue snippets插件原理與使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

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 表單輸入格式化中文輸入法異常問題

    vue 表單輸入格式化中文輸入法異常問題

    v-model 是 vue.js 提供的語法糖,根據(jù)不同的表單控件監(jiān)聽不同的事件,實(shí)現(xiàn)對(duì)表單控件的數(shù)據(jù)雙向綁定。這篇文章主要介紹了vue 表單輸入格式化中文輸入法異常,需要的朋友可以參考下
    2018-05-05
  • Vue如何指定不編譯的文件夾和favicon.ico

    Vue如何指定不編譯的文件夾和favicon.ico

    這篇文章主要介紹了Vue如何指定不編譯的文件夾和favicon.ico,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue將props值實(shí)時(shí)傳遞 并可修改的操作

    Vue將props值實(shí)時(shí)傳遞 并可修改的操作

    這篇文章主要介紹了Vue將props值實(shí)時(shí)傳遞 并可修改的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue-cli3設(shè)置代理無效的解決

    vue-cli3設(shè)置代理無效的解決

    這篇文章主要介紹了vue-cli3設(shè)置代理無效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vuex新手進(jìn)階篇之取值

    vuex新手進(jìn)階篇之取值

    Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之取值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • vue中的$emit 與$on父子組件與兄弟組件的之間通信方式

    vue中的$emit 與$on父子組件與兄弟組件的之間通信方式

    本文主要對(duì)vue 用$emit 與 $on 來進(jìn)行組件之間的數(shù)據(jù)傳輸。重點(diǎn)給大家介紹vue中的$emit 與$on父子組件與兄弟組件的之間通信方式,感興趣的朋友一起看看
    2018-05-05
  • vue-router 組件復(fù)用問題詳解

    vue-router 組件復(fù)用問題詳解

    本篇文章主要介紹了vue-router 組件復(fù)用問題詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-01
  • Vue2.0用 watch 觀察 prop 變化(不觸發(fā))

    Vue2.0用 watch 觀察 prop 變化(不觸發(fā))

    本篇文章主要介紹了Vue2.0用 watch 觀察 prop 變化(不觸發(fā)),非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2017-09-09
  • vue項(xiàng)目中如何配置eslint和prettier

    vue項(xiàng)目中如何配置eslint和prettier

    這篇文章主要介紹了vue項(xiàng)目中如何配置eslint和prettier問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能

    vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能

    這篇文章主要介紹了vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-01-01

最新評(píng)論