VisualStudio创建vue组件模板文件

1、打开vsCode客户端。

点击【文件】，在下拉菜单中选择【首选项】，在右侧展开栏中选择【用户片段】

2、这里我已经创建过一个vue.json的模板文件了。

你可以选择新建，然后输入vue.json，回车创建。

3、将{}内的其他内容全部注释，填入如下代码。

    "Print to console":{

    "prefix": "vue",

        "body": [

            "<template>",

            "  <div></div>",

            "</template>",

            "",

            "<script>",

            "export default {",

            "  components:{},",

            "  props:{},",

            "  data(){",

            "    return {",

            "    }",

            "  },",

            "  watch:{},",

            "  computed:{},",

            "  methods:{},",

            "  created(){},",

            "  mounted(){}",

            "}",

            "</script>",

            "<style scoped>",

            "</style>"

        ],

                "description": "A vue file template"

        }

4、注意标点符号。这里每一行代码都用英文双引号引起来。

"prefix": "vue", 这里是在输入vue字符串时候，自动body里面的代码片段。

在src/views下面新建一个：Demo.vue的组件文件。

5、打开Demo.vue文件。

输入vu就可以看到弹出来的提示，第一条就是创建的代码片段文件。

6、直接回车，即可创建出模板文件。

这样我们在编写代码的时候就方便很多了。

因为一些生命周期函数也都直接给创建出来了，不用担心是否会输入错误。

7、如果模板文件错误了，重复步骤1,2，3打开模板文件，修改错误的行就可以。

ctrl+ /注释相关行。

注意标签不要弄乱了。

8、总结：创建有效的模板文件可以极大提高编码速度，同时也会避免一些不必要的失误。