使用 VSCode 快速生成 Vue 模板

分享:
標籤: VS code Vue.js

應該用 VS Code 開發網頁的朋友不少,雖然我是使用 PhpStorm,這邊來教一下大家怎麼使用 VS Code 快速建立 vue 的模板。

首先先在瀏覽器安裝一下 Vetur 這個套件,是可用來識別 Vue 文件的。

接著安裝 Vue VSCode Snippets 這個套件。

套件連結

接著只要建立一個新的檔案,副檔名取 .vue 然後打熱鍵 vbase,就會出現像這樣的樣板了:

<template>
    <div>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

 

如果打 vbase3,則是會出現 composition API 版的樣板:

<template>
    <div>

    </div>
</template>

<script>
export default {
    setup () {
        

        return {}
    }
}
</script>

<style lang="scss" scoped>

</style>

 

其他還有許多樣板或熱鍵可以使用,有興趣可以到官方文件去試試看。