美文网首页
使用vs code创建vue代码片段

使用vs code创建vue代码片段

作者: 已不淘气很多年 | 来源:发表于2018-05-09 13:15 被阅读0次

在使用vue开发项目的时候,由于组件比较多,一开始的时候都是复制粘贴,做着做着觉得挺麻烦的而且效率不高,于是就思考,每个组件的template和js这块很多都是相同的,是否可以做成一个模板然后使用呢?于是上网搜索了下,在vs code中可以通过代码片段来实现。

创建用户代码片段

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

然后再弹出的输入框中输入vue,然后回车(Enter),效果如下:

image.png

在vue.json中写上代码片段,代码如下:

{
    "vue-template": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div>",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  name: '',",
            "  data () {",
            "    return {",
            "    }",
            "  },",
            "  methods: {}",
            "}",
            "</script>",
            "",
            "<style scoped lang=scss>",
            "",
            "</style>"
        ],
        "description": "my vue template"
    }
}

书写完之后,保存文件即可。

使用vue的代码片段

效果如图:


image.png

出现提示后,按下回车(Enter),然后就会出现想要的结果了。如下图:


image.png

最后:就可以更加愉快的使用vue做我们的项目开发了,效率又提升了。
ps: 因为我配置了sass,所以在代码片段中,style标签添加了 lang=scss属性。这个需要在webpack的配置文件中配置rule,便可以使用sass语法了。当然,还可以使用vs code创建其他框架或者语言的代码片段。

相关文章

网友评论

      本文标题:使用vs code创建vue代码片段

      本文链接:https://www.haomeiwen.com/subject/nopnrftx.html