(英文版)VScode一键生成.vue模板
1. 安装vscode,官网地址
2.安装一个插件,识别vue文件
插件库中搜索Vetur,下图中的第一个,点击安装(Install)
![](https://img2018.cnblogs.com/blog/1488621/201902/1488621-20190227103112921-66597196.png)
3.新建代码片段
点击Code(代码)-Preferences(首选项)-User Snippers(用户代码片段)
4. 搜索框中输入:vue.json.
- 如果可以搜到vue.json,请把下列代码粘贴进该文件中。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div>", "</template>\n", "<script>", " export default {", " data () {", " return {\n", " }", " },", " components: {\n", " }", " }", "</script>\n", "<style>\n", " ", "</style>", "$2" ], "description": "Log output to console" } }
- 如果搜索不到vue.json文件,请新建文件,命名为vue.json。
以我的为例,原本是没有vue.json文件的,点击vue-html.json文件,把下列代码粘贴进该文件中
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div>", "</template>\n", "<script>", " export default {", " data () {", " return {\n", " }", " },", " components: {\n", " }", " }", "</script>\n", "<style>\n", " ", "</style>", "$2" ], "description": "Log output to console"å } }
输入快捷键:ctrl+shift+s(另存为),取名vue.json
5. 上面代码中的 "prefix": "vue", 就是快捷键;保存好之后,新建.vue结尾的文件试试
输入vue,按tab键,即可一键生成vue模板。
致力于前端技术学习与分享,会及时更新博客。