在一个Vue的项目中,反复的新建.vue文件是一个必不可少的工序。本着科技让人偷懒的原则,我们可以利用VSCode的snippet在.vue文件创建后能轻松地生成一套模板。

整个过程是轻松加愉快的,只需几步即可。

具体步骤如下

  1. 使用Ctrl + Shift + P召唤出控制台,然后输入snippets(跟着自动提示走就行了)并选择。
  2. 接下来输入vue并选择,VSCode会自动生成一个vue.json的文件。这里就是我们要输入模板的地方了。
  3. 输入模板,具体格式如下(这是我用的格式,当然也可根据自己的喜好进行修改)
    其中$0代表模板生成后,光标停留的位置。
        "Print to console":{
        "prefix": "vue",
            "body": [
                "<template>",
                "  <div class=\"wrapper\">$0</div>",
                "</template>",
                "",
                "<script>",
                "export default {",
                "  components:{},",
                "  props:{},",
                "  data(){",
                "    return {",
                "    }",
                "  },",
                "  watch:{},",
                "  computed:{},",
                "  methods:{},",
                "  created(){},",
                "  mounted(){}",
                "}",
                "</script>",
                "<style lang=\"scss\" scoped>",
                ".wrapper{}",
                "</style>"
            ],
            "description": "A vue file template"
    }
    
  4. 重启生效

Logo

前往低代码交流专区

更多推荐