一、安装Vetur插件
目的是为了识别 .vue 文件；
二、新建用户代码片段
文件 ➡ 首选项 ➡ 用户代码片段 ➡ 点击新建全局代码片段 ➡ 取名 myvue ➡ 确定
三、使用下面的自定义 .vue 模板
{
"Print to console": {
"prefix": "myvue",
"body": [
"<template>",
"\t<div class='$2'>$5</div>",
"</template>\n",
"<script>",
"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"export default {",
"\t//import引入的组件需要注入到对象中才能使用",
"\tcomponents: {},",
"\tdata() {",
"\t\treturn {}",
"\t},",
"\tmethods: {},",
"\tcomputed: {},",
"\twatch: {},",
"\tfilters: {},",
"\tcreated() {}, //生命周期 - 创建完成（可以访问当前this实例）",
"\tmounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）",
"\tbeforeCreate() {}, //生命周期 - 创建之前",
"\tbeforeMount() {}, //生命周期 - 挂载之前",
"\tbeforeUpdate() {}, //生命周期 - 更新之前",
"\tupdated() {}, //生命周期 - 更新之后",
"\tbeforeDestroy() {}, //生命周期 - 销毁之前",
"\tdestroyed() {}, //生命周期 - 销毁完成",
"\tactivated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
"}",
"</script>\n",
"<style scoped>",
"/* @import url(); 引入公共css类 */",
"$4",
"</style>"
],
"description": "生成vue模板"
},
"http-get请求": {
"prefix": "httpget",
"body": [
"this.\\$http({",
"\turl: this.\\$http.adornUrl(''),",
"\tmethod: 'get',",
"\tparams: this.\\$http.adornParams({})",
"}).then(({ data }) => {",
"\t",
"})"
],
"description": "httpGET请求"
},
"http-post请求": {
"prefix": "httppost",
"body": [
"this.\\$http({",
"\turl: this.\\$http.adornUrl(''),",
"\tmethod: 'post',",
"\tdata: this.\\$http.adornData(data, false)",
"}).then(({ data }) => {",
"\t",
"});"
],
"description": "httpPOST请求"
},
"简单newVue": {
"prefix": "v1",
"body": [
"\tlet vm = new Vue({",
"\t\tel:'#root',",
"\t\tdata: {},",
"\t\tmethods: {},",
"\t\tcomputed: {},",
"\t\twatch: {},",
"\t\tfilters: {}",
"\t})"
],
"description": "简单地初始化一个vue结构"
}
}
补充：
1、自定义html模板：
{
"h5 template": {
"prefix": "myhtml", // 对应的是使用这个模板的快捷键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<title>Document</title>",
"\t<script text=\"text/javascript\" src=\"./lib/vue-2.4.0.js\"></script>",
"</head>\n",
"<body>",
"\t<div id =\"app\"> </div>\n",
"\t<script text=\"text/javascript\">",
"\t let vm = new Vue({",
"\t\tel: '#app',",
"\t\tdata: {},",
"\t\tmethods: {}",
"\t });",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "MyHtml模板"
}
}
