VS Code代码块之vue模板

  1. 点击左下角 管理 按钮,选择 用户代码片段 ,搜索 vue.json
  2. 获取文件名:${TM_FILENAME_BASE},光标终止位置:$0,下一处光标停留位置:$1、$2...
  3. 将下面代码块粘贴在vue.json文件中,根据自己的需求更改:"prefix":代码块快捷键
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!--",
            " * @FileDescription: $1",
            " * @Author: FunnySoul300Jin",
            " * @CreateTime: ${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE}",
            " * @LastEditors: FunnySoul300Jin",
            " * @LastEditTime: ${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE}",
            "-->",
            "",
            "<template>",
            "    <div class=\"$2\">$0</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "    name: '${TM_FILENAME_BASE}',",
            "    components: {},",
            "    data() {",
            "        return {}",
            "    },",
            "    created() {},",
            "    methods: {}",
            "}",
            "</script>",
            "",
            "<style lang=\"scss\" scoped></style>",
            ""
        ],
        "description": "vue template"
    }
  1. template.vuevue文件中,键入vue回车,展现效果如下
<!--
 * @FileDescription: 
 * @Author: FunnySoul300Jin
 * @CreateTime: 2020/04/22 星期三
 * @LastEditors: FunnySoul300Jin
 * @LastEditTime: 2020/04/22
-->

<template>
    <div class=""></div>
</template>

<script>
export default {
    name: 'index',
    components: {},
    data() {
        return {}
    },
    created() {},
    methods: {}
}
</script>

<style lang="scss" scoped></style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。