快速生成Vue3组件模板
快速生成vue组件模板代码
·
这个方法是使用快捷键生成,需要你提前创建好vue文件

以下是配置过程
打开命令面板:按 Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(Mac)打开命令面板。

输入 Preferences: Configure User Snippets:选择此选项以打开代码片段配置文件。

选择创建全局的代码配置,这样在哪里都可以用,当然你也可以选择各种的语言进行创建

拷贝以下Tempalte代码,放入新建的文件中,你也可以自定义代码块
{
"Vue 3 tempalte Pane": {
"prefix": "vt",
"body": [
"<template>",
" <div class=\"container\">",
"</template>",
"",
"<script lang=\"ts\" setup>",
"// 导入工具库",
"import { ref, onMounted, onUnmounted } from 'vue'",
"// 导入组件库",
"// 定义属性",
"// 定义方法",
"// 生命周期",
"onMounted(() => {",
"})",
"",
"onUnmounted(() => {",
"})",
"</script>",
"",
"<style scoped>",
".container {",
" display: flex;",
" height: 400px;",
" width: 100%;",
" border: 1px solid #ccc;",
"}",
"</style>"
],
"description": "Vue 3 Split Pane Component"
},
"Vue 3 Coment": {
"prefix": "vc",
"body": [
"// 导入工具库",
"import { ref, onMounted, onUnmounted } from 'vue'",
"// 导入组件库",
"// 定义属性",
"const v = ref()",
"// 定义方法",
"const hanlder = () => {}",
"// 生命周期",
"onMounted(() => {",
"})",
"",
"onUnmounted(() => {",
"})",
],
"description": "Vue 3 Coment"
}
}
保存完后就能看到刚才创建的文件

这时候你在vue文件中或者其他的文件中输入 vt 或者 vc 然后回车就能生成代码块儿

更多推荐



所有评论(0)