首页 网络技术
  1. 正文

使用VSCode搭建vue模板的示例

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文件后:

本文标题:使用VSCode搭建vue模板的示例
本文链接:https://www.qqooo.cn/post/6426.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!