分享一下:vue3.0在VScode的模板格式
这里有三种格式:第一种:vsc:是Vue2的模板第二种:v3:是vue3+webpack版的模板第三种:vi:是Vue3+vite的模板{"Print to console": {"prefix": "vsc","body": ["<template>","<div></div>","</template>","","<script>",
·
这里有三种格式:
第一种:vsc:是Vue2的模板
第二种:v3:是vue3+webpack版的模板
第三种:vi:是Vue3+vite的模板
{
"Print to console": {
"prefix": "vsc",
"body": [
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
" export default {",
" name: '',",
" data() {",
" return {",
" };",
" },",
" mounted() {",
" },",
" methods: {},",
" };",
"</script>",
"",
"<style scoped>",
"",
"</style>",
"",
],
"description": "自定义Vue模板"
},
"vue3": {
"prefix": "v3",
"body": [
"<template>",
" ",
"</template>",
"",
"<script lang=\"ts\">",
"import { defineComponent, ref, reactive, toRefs } from 'vue';",
"export default defineComponent({",
" name: '',",
" setup() {",
" const data = reactive({})",
" return {",
" \t...toRefs(data)",
" };",
" },",
" });",
"</script>",
"",
"<style scoped>",
"",
"</style>",
"",
],
"description": "自定义Vue模板"
},
"vite-vue3": {
"prefix": "vi",
"body": [
"<template>",
" ",
"</template>",
"",
"<script setup lang=\"ts\">",
"import { ref } from '@vue/reactivity';",
"</script>",
"",
"<style scoped>",
"",
"</style>",
"",
],
"description": "自定义Vue-Vite模板"
}
}
说明:下面这样写的目的是为了让所有响应式变量统一写在data里面。防止乱想,提高代码整洁行,除非你使用hooks,对于很多vue2重度依赖者来说这个是很好的写法
" setup() {",
" const data = reactive({})",
" return {",
" \t...toRefs(data)",
" };",
" }z
更多推荐
已为社区贡献5条内容
所有评论(0)