vscode中快速搭建vue模板的方法介绍-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

vscode如何快速搭建vue模板？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

相关推荐：《vscode基础教程》、《vue.js教程》

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

vue2.x添加下方代码

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

vue3.x添加下方代码

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