1.点击文件>点击首选项>点击用户片段;
2.在右方点击输入框下边的:新建全局代码片段文件
3.在输入框里给片段命名(我的命名vue-templateName),输入结束--点击回车
4.出现下图,则表示进入设置模板页面
.
5.在{}内输入模板
6.模板输入("prefix": "vue-template", // vue-template是使用这个模板的快捷键)完成点击保存(ctrl+s)
7.点击新建页面,测试模板是否可用,如下图:出现提示后,点击回车即可
8.在要修改某个代码片段的时候,重复步骤1,在输入框里输入片段名称(例如:vue-templateName),点击对应的片段即可进入修改页面。
完整vue模板如下:
{
"Print to console": {
"prefix": "vue-template",
"body": [
"<!-- $0 -->",
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" data () {",
" return {",
" };",
" },",
"",
" components: {},",
"",
" computed: {},",
"",
" mounted() {},",
"",
" methods: {}",
"}",
"",
"</script>",
"<style scoped>",
"</style>"
],
"description": "Log output to console"
}
}
完整html模板如下:
{
"h5 template": {
"prefix": "html-template", // 对应的是使用这个模板的快捷键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<title>Document</title>",
"\t<script src=\"./lib/vue-2.4.0.js\"></script>",
"</head>\n",
"<body>",
"\t<div id =\"app\"> </div>\n",
"\t<script>",
"\t //创建Vue实例,得到 ViewModel",
"\t var vm = new Vue({",
"\t\tel: '#app',",
"\t\tdata: {},",
"\t\tmethods: {}",
"\t });",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "html-vue-template" // 模板的描述
}
}