如何在vscode中创建自己的vue3组件代码块
使用时可以一步生成组件的基本结构,可以极大方便我们的开发。包含 composition api 的组件模板和 setup语法糖组件的模板
·
创建该组件代码快后,会极大方便我们的开发,话不多说,下面由我带你一步步操作和使用。
1.在vscode中找到创建代码块的位置。首先点击设置按钮,然后点击用户代码块。
2.然后在搜索框中输入vue。是这样的,我们要在什么语言环境下使用该代码块就搜索什么,比如我要创建一个js代码块,在js文件中才使用,我就搜索javascript,然后选择javascript.json。这里是在vue文件中要使用的代码块,因此我们搜索vue,然后点击vue.json。
点击vue.json后,把下面配置全选替换掉里面的内容即可。如果你里面有自己的代码块,追加即可。
{
"vue3 component":{
"prefix": "vue3",
"body": [
"<template>",
"$2",
"</template>",
"$2",
"<script>",
"import {defineComponent,reactive,toRefs} from 'vue'",
"import {} from 'vue-router'",
"import {} from 'vuex'",
"$2",
"export default defineComponent({",
"name:'',",
"props:{},",
"emits:[],",
"setup(props,context){",
" const data=reactive({$1}) //里面写所有的响应式数据,像vue2中的data一样",
"$2",
" return{",
" ...toRefs(data),",
" }",
"},",
"components:{},",
"})",
"</script>",
"$2",
"<style scoped>",
"$2",
"</style>"
],
"description": "use composition api to create component"
},
"simple composition add option":{
"prefix": "setup add option",
"body": [
"<script setup lang='ts'>",
"import {} from 'vue'",
"$1",
"$2",
"</script>",
"<script lang='ts'>",
"//解决vscode插件报错问题,除此之外组件可能存在使用普通script的情况",
"import { defineComponent } from 'vue'",
"export default defineComponent({",
"components:{",
"$2",
"}",
"})",
"</script>",
"$2",
"<template>",
"$2",
"</template>",
"$2",
"<style scoped>",
"$2",
"</style>"
],
"description": "use setup add option to create component template"
} ,
"simple composition":{
"prefix": "setup",
"body": [
"<script setup lang='ts'>",
"import {} from 'vue'",
"$1",
"$2",
"</script>",
"$2",
"<template>",
"$2",
"</template>",
"$2",
"<style scoped>",
"$2",
"</style>"
],
"description": "use setup to create component template"
}
}
3.创建文件 test.vue,在该文件中输入 vue3,敲回车就能生成vue3 composition api组件的基本结构。输入setup敲回车就能生成setup语法糖组件的基本结构。生成结构如下,是不是非常方便呢。
composition api组件
<template>
</template>
<script>
import {defineComponent,reactive,toRefs} from 'vue'
import {} from 'vue-router'
import {} from 'vuex'
export default defineComponent({
name:'',
props:{},
emits:[],
setup(props,context){
const data=reactive({}) //里面写所有的响应式数据,像vue2中的data一样
return{
...toRefs(data),
}
},
components:{},
})
</script>
<style scoped>
</style>
setup script组件
<script setup lang='ts'>
import {} from 'vue'
</script>
<template>
</template>
<style scoped>
</style>
4.react函数组件代码块 ts版本
"react function component ts":{
"prefix":"rfcts",
"body":[
"import React,{} from 'react' "
"$2"
"interface PropsType {"
"[key: string]: any"
"}"
"$2"
"const ${TM_FILENAME_BASE}Component: React.FC<PropsType> = ({}: PropsType) => {"
"return <div>$1</div>"
"}"
"$2"
"export default ${TM_FILENAME_BASE}Component"
],
"description":"create typescript react function component"
}
更多推荐
已为社区贡献3条内容
所有评论(0)