1. 安装vscode,官网地址
2.安装一个插件,识别vue文件
插件库中搜索Vetur,下图中的第一个,点击安装(Install)
3.新建代码片段
点击Code(代码)-Preferences(首选项)-User Snippers(用户代码片段)
4. 搜索框中输入:vue.json.
- 如果可以搜到vue.json,请把下列代码粘贴进该文件中。
{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div> ", " </div>", "</template> ", "<script>", " export default {", " data () {", " return { ", " }", " },", " components: { ", " }", " }", "</script> ", "<style> ", " ", "</style>", "$2" ], "description": "Log output to console" } }
- 如果搜索不到vue.json文件,请新建文件,命名为vue.json。
以我的为例,原本是没有vue.json文件的,点击vue-html.json文件,把下列代码粘贴进该文件中
{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div> ", " </div>", "</template> ", "<script>", " export default {", " data () {", " return { ", " }", " },", " components: { ", " }", " }", "</script> ", "<style> ", " ", "</style>", "$2" ], "description": "Log output to console"å } }
输入快捷键:ctrl+shift+s(另存为),取名vue.json
5. 上面代码中的 "prefix": "vue", 就是快捷键;保存好之后,新建.vue结尾的文件试试
输入vue,按tab键,即可一键生成vue模板。