vscode 快速生成 Vue2、vue3(setup函数)、vue3(setup语法糖)模板

 

vue2组件模版:

"vue2组件模版": {

        "prefix": "vue2",

        "body": [

            "<template>",

            "  <div>\n",

            "  </div>",

            "</template>",

            "<script>",

            "export default {",

            "  name: 'APP',",

            "  data () {",

            "    return {",

            "    }",

            "  },",

            "  methods: {",

            "  },",

            "  created () {",

            "  },",

            "  mounted () {",

            "  },",

            "}",

            "</script>",

            "<style lang=\"scss\" scoped>",

            "/* @import url(); 引入css类 */\n",

            "</style>",

            "$2"

        ],

        "description": "vue2组件模版"

    },

vue3组件setup函数模版

"vue3组件setup函数模版": {

        "prefix": "vue3",

        "body": [

            "<template>",

            "  <div class=\"container\">\n",

            "  </div>",

            "</template>\n",

            "<script>",

            "import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'",

            "export default {",

            "  name: '$TM_FILENAME_BASE',",

            "  setup () {",

            "",

            // "    console.log('1-开始创建组件-setup')",

            // "    const data = reactive({})",

            // "    onBeforeMount(() => {",

            // "      console.log('2.组件挂载页面之前执行----onBeforeMount')",

            // "    })",

            // "    onMounted(() => {",

            // "      console.log('3.-组件挂载到页面之后执行-------onMounted')",

            // "    })",

            // "    return {",

            // "      ...toRefs(data),",

            // "    }",

            "  },",

            "}",

            "",

            "</script>",

            "<style lang=\"scss\" scoped>",

            "/* @import url(); 引入css类 */\n",

            "</style>",

            ""

        ],

        "description": "vue3组件setup函数模版"

    },

vue3组件setup语法糖模版

"vue3组件setup语法糖模版": {

        "prefix": "setup",

        "body": [

            "<template>",

            "  <div class=\"container\">\n",

            "  </div>",

            "</template>\n",

            "<script setup>",

            "import {} from \"vue\"\n\n\n\n\n\n",

            "</script>\n",

            "<style lang=\"scss\" scoped>",

                "/* @import url(); 引入css类 */\n",

                "</style>",

            "$2"

        ],

        "description": "vue3组件setup语法糖模版"

    }

猜你喜欢

转载自blog.csdn.net/weixin_63443983/article/details/130432297