vscode快速生成vue模板

最新推荐文章于 2024-05-17 09:28:01 发布

不会写代码的小程

最新推荐文章于 2024-05-17 09:28:01 发布

阅读量326

点赞数 2

文章标签： vscode vue.js

本文链接：https://blog.csdn.net/igcnfjbnxjsb/article/details/137464510

版权

点击vscode左下角设置—用户代码片段

输入vue.json

在vue.json里进行设置

输入v2就会出现vue2的模版，v3对应vue3+ts的模版

{
  // vue2模板
  "Print to console": {
      "prefix": "v2",
      "body": [
          "<template>",
          "  <view class=\"$1\">$2</view>",
          "</template>",
          "",
          "<script>",
          "export default {",
          "  components: {$3},",
          "  data () {",
          "    return {",
          "$4",
          "    }",
          "  },",
          "  methods: {},",
          "  created () {}",
          "}",
          "</script>",
          "<style lang=\"scss\" scoped>",
          "</style>",
          "",
      ],
      "description": "A vue file template"
  },
  // vue3语法糖模板
  "Print to setup": {
      "prefix": "v3",
      "body": [
          "<template>",
          "  <view></view>",
          "</template>\n",
          "<script setup lang=\"ts\">",
          "import { ref } from 'vue';\n",
          "</script>\n",
          "<style lang=\"scss\" scoped>\n",
          "</style>",
      ],
      "description": "Log output to console"
  }
}

具体效果如下，以v3为例