当前位置: 代码迷 >> 综合 >> vue文件快速生成页面模板
  详细解决方案

vue文件快速生成页面模板

热度:94   发布时间:2024-02-04 17:39:17.0

找到文件、首选项、用户片段、 输入vue   会自动到vue.json页面中,

然后将以下代码复制、粘贴、保存。

回到以点vue结尾的文件 输入 vv 点击tab就会自动生成以下模板

{

    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and

    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:

    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the

    // same ids are connected.

    // Example:

    // "Print to console": {

    // "prefix": "log",

    // "body": [

    // "console.log('$1');",

    // "$2"

    // ],

    // "description": "Log output to console"

    // }

    "Print to console": {

        "prefix": "vv",

        "body": [

            "<template>",

            "  <div class='container'>$5</div>",

            "</template>",

            "",

            "<script>",

            "",

            "  export default {",

            "    // import引入的组件需要注入到对象中才能使用",

            "    components: {},",

            "    data () {",

            "      // 这里存放数据",

            "      return {}",

            "    },",

            "    // 生命周期 - 创建完成(可以访问当前this实例)",

            "    created () {},",

            "    // 生命周期 - 挂载完成(可以访问DOM元素)",

            "    mounted () {},",

            "    // 这里存放数据",

            "    beforeCreate () {},",

            "    // 生命周期 - 挂载之前 ",

            "    beforeMount () {},",

            "    // 生命周期 - 更新之前 ",

            "    beforeUpdate() {},",

            "    // 生命周期 - 更新之后 ",

            "    updated () {},",

            "    // 生命周期 - 销毁之前 ",

            "    beforeDestroy() {},",

            "    // 生命周期 - 销毁完成 ",

            "    destroyed () {},",

            "    // 如果页面有keep-alive缓存功能,这个函数会触发",

            "    activated () {},",

            "    // 方法集合",

            "    methods: {},",

            "    // 监听属性 类似于data概念",

            "    computed: {},",

            "    // 监控data中的数据变化",

            "    watch: {},",

            "  }",

            "</script>",

            "",

            "<style scoped>",

            "  /* @import url(); 引入公共css类 */",

            "",

            "</style>"

        ],

        "description": "Log output to console"

    }

}

  相关解决方案