vscode 创建vue模板

（确保编辑器已经安装了插件 vetur、vueHelper）

1. ctrl+shift+p 输入snippets 选中它 输入vue》vue.json

   

2. 或者操作 文件》首选项》用户代码片段》vue》vue.json

3. 复制如下 也可自由编辑

    { 
       "Print to console": {
                 prefix": "vue",
                 "body": [
                    "<!-- $1 -->",
                    "<template>",
                    "<div class='$2'>$5</div>",
                    "</template>",
                    "",
                    "<script>",
                    "",
                    "// 导入的其他文件 例如：import moduleName from 'modulePath';",
                    "",
                    "export default {",
                        "",
                    "//import所引入的组件注册",
                    "components: {",
                    "",
                    "},",
                     "",
                    "data() {",
                    "  return {",
                    "",
                    "  };",
                    "},",
                    "",
                    "//监听属性",
                    "computed: {",
                     "",
                    "},",
                    "",
                    "//监控data中的数据变化",
                    "watch: {",
                    "",
                    "},",
                    "",
                    "//方法集合",
                    "methods: {",
                        "",
                    "},",
                    "",
                    "//生命周期 - 组件实例刚被创建",
                    "beforeCreate() { ",
                        "",
                    "},",
   
                    "//创建完成 访问当前this实例",
                    "created() {",
                        "",
                    "},",
                    "//挂载之前",
                    "beforeMount() { ",
                        "",
                    "},",
    
                    "//挂载完成 访问DOM元素",
                    "mounted() {",
                        "",
                    "},",
                    
                    "//更新之前",
                    "beforeUpdate() { ",
                        "",
                    "},",
                    
                    "//更新之后",
                    "updated() { ",
                        "",
                    "},",
    
                    "//for keep-alive 缓存功能，组件被激活时调用",
                    "activated() {",
                        "",
                    "},",
    
                    "//for keep-alive 组件被移除时调用",
                    "deactivated() {",
                        "",
                    "},",
    
                    "//组件销毁之前调用",
                    "beforeDestroy() {",
                        "",
                    "},",
    
                    "//组件销毁之后调用",
                    "destroyed() {",
                        "",
                    "},",
                    
                "}",
                "</script>",
                "<style lang='scss' scoped>",
                "//@import url($3); 引入公共css类",
                    "$4",
                "</style>"
            ],
            "description": "Log output to console"
        }
    }
   

   最后， 保存 然后 新建.vue文件,如果新建的页面啥都没有 就在这个页面输入 vue 然后回车 done。