第一步
安装 vscode
,可以去官网下载安装
第二步
安装拓展插件 vetur
,Vue tooling for VS Code.
第三步
找到用户片段:文件---->首选项—>用户片段
第四步
点击新建全局代码片段,然后输入 vue.json
第五步
在 vue.json.code-snippets
文件里添加下面代码,然后保存
{ // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. // Placeholders with the same ids are connected. // Example: // "Print to console": { // "scope": "javascript,typescript", // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } "Print to console": { "prefix": "vue", "body": [ "<template>", "\t<div class=''>\n\t\t$1\n\t</div>", "</template>", "", "<script>", "export default {", "\tdata () {", "\t\treturn {", "\t\t\t$2", "\t\t};", "\t},", "\tcomponents: {", "\t\t$2", "\t},", "\tcreated() {", "\t\t$2", "\t},", "\tmounted() {", "\t\t$2", "\t},", "\tmethods: {", "\t\t$2", "\t},", "};", "</script>", "", "<style lang='scss' scoped>", "", "</style>" ], "description": "vue output to vue-template" } }
第六步
新增一个文件 .vue
,然后输入 vue
然后按 tab
键