vscode设置vue模板流程记录

第一步: 打开vscode依次打开

文件 --> 首选项 --> 用户代码片段 --> 输入vue，打开vue.json -->清空内容后将以下内容复制进去

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            " <div class=\"page\">\n",
            " </div>",
            "</template>\n",
            "<script type=\"text/ecmascript-6\">",
			"export default {",
				"// 接收父级传递的参数",
				"props:[],",
				"// 监听数据变化",
				"watch:{},",
				"// 页面数据集合",
				" data() {",
				" return {\n",
				" }",
				" },",
				"// 模板组件",
				" components: {\n",
				" },",
			"// 实例化之前触发事件",
			"beforeCreate(){\n",

			"},",
			"// 实例化之后触发事件",
			"created(){},",
			"// 实时监控data参数数据变化",
			"computed:{},",
			"// 执行方法",
			"methods:{",
		
			"},",
			"// 加载完毕后触发",
			"mounted(){},",
			"// 路由退出时候调用",
			"beforeRouteLeave(to,from,next){next()}",
            "}",
            "</script>\n",
            "<style scoped lang=\"less\">\n",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }
}

第二步，保存vue.json之后，新建一个vue文件，在首行输入 vue后按键盘tab键，若将模板内容顺利带出表示模板构建成功。