使用vscode建立vue模板

最新推荐文章于 2024-08-07 16:29:52 发布

爱花的蛋

最新推荐文章于 2024-08-07 16:29:52 发布

阅读量175

点赞数

分类专栏： VUE 前端文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45633422/article/details/108110018

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

VUE

9 篇文章 0 订阅

订阅专栏

需要先安装插件Vetur(文件->首选项->扩展->输入Vetur->安装

1.文件->首选项->用户（代码）片段->输入vue->选择vue.json（VUE）
到这儿就能够进入vue.json的文件中，在这里输入想要建立的模板

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<!-- $0 -->",
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data () {",
      "    return {",
      "    };",
      "  },",
      "",
      "  components: {},",
      "",
      "  computed: {},",
      "",
      "  mounted: {},",
      "",
      "  methods: {}",
      "}",
      "",
      "</script>",
      "<style lang='scss' scoped>",
      "</style>"
  ],
    "description": "Log output to console"
  }
   //$0 表示你希望生成代码后光标的位置 ;
   // prefix 表示生成对应预设代码的命令
}

保存后关闭。到这里可以说模板已经建立完成。
prefix 表示生成对应预设代码的命令：输入vue按下enter，自动生成内容（或者鼠标手动选择）
例如：新建一个名为test.vue的文件，输入vue按下enter，就会自动生成内容

当然，也可以为.js、.html等各种文件预设代码片段，具体设置可以搜索一下snippet，了解用法。
文章来源：https://www.cnblogs.com/pwindy/p/12920050.html