vscode中快速搭建vue模板的方法介绍

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

vscode中快速搭建vue模板的方法介绍

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

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

vue2.x添加下方代码

{   "Print to console": {   "prefix": "vue",   "body": [   "<!-- $0 -->",   "<template>",   "  <p></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p>",   "</template>",   "",   "<script>",   "export default {",   "  data () {",   "    return {",   "    };",   "  },",   "",   "  components: {},",   "",   "  computed: {},",   "",   "  mounted: {},",   "",   "  methods: {}",   "}",   "",   "</script>",   "<style>",   "</style>"   ],   "description": "Log output to console"   }   }

vue3.x添加下方代码

{ "Print to console": {   "prefix": "vue3",   "body": [   "<!-- $0 -->",   "<template>",   "  <p></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p>",   "</template>",   "",   "<script>",   "import { computed, reactive, ref, watch, onMounted,onUpdate,onUnmounted} from &#39;vue&#39;;",   "export default {",   "setup(){",   "//类mounted",   "onMounted(()=>{",   "",   "})",   "//相当于updated",   "onUpdate(()=>{",   "",   "})",   "//相当于destroyen",   "onUnmounted(()=>{",   "",   "})",   "return {}",   "}",   "}",   "",   "</script>",   "<style>",   "</style>"   ],   "description": "Log output to console"   }  }

新建.vue文件后   

vscode中快速搭建vue模板的方法介绍

相关推荐:

2020年前端vue面试题大汇总(附答案)

2020年前端vue面试题大汇总(附答案)

更多编程相关知识,请访问:2020年前端vue面试题大汇总(附答案)!!

以上就是

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享