VSCode快速搭建vue模板

文件 -> 首选项 -> 用户代码片段

搜索vue

vue2.x添加下方代码

{ "Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->", "<template>", "  <div></div>", "</template>", "", "<script>", "export default {", "  data () {", "    return {", "    };", "  },", "", "  components: {},", "", "  computed: {},", "", "  mounted: {},", "", "  methods: {}", "}", "", "</script>", "<style scoped>", "</style>" ], "description": "Log output to console" } }

vue3.x添加下方代码

{"Print to console": { "prefix": "vue3", "body": [ "<!-- $0 -->", "<template>", "  <div></div>", "</template>", "", "<script>", "import { computed, reactive, ref, watch, onMounted,onUpdate,onUnmounted} from 'vue';", "export default {", "setup(){", "//类mounted", "onMounted(()=>{", "", "})", "//相当于updated", "onUpdate(()=>{", "", "})", "//相当于destroyen", "onUnmounted(()=>{", "", "})", "return {}", "}", "}", "", "</script>", "<style scoped>", "</style>" ], "description": "Log output to console" } }

新建.vue文件后：