vsc-快速创建vue模板

原文链接:https://www.cnblogs.com/ysmc/p/16054432.html

文件-->首选项-->用户片段-->输入“vue”

输入以下内容

复制代码
{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "  <div>$5</div>",
            "</template>",
            "",
            "<script>",
            "// import",
            "export default {",
            "  // 注册",
            "  components: {},",
            "  // 定义变量",
            "  data() {",
            "    return {}",
            "  },",
            "  // 计算属性 当里面的数据发生变化时,会自动触发重新计算",
            "  computed: {},",
            "  // 监控data中的变量变化",
            "  watch: {},",
            "  // 方法集合",
            "  methods: {},",
            "  // --------------------------- 生命周期 start -----------------------------------",
            "  // 创建完成(可以访问当前this实例)",
            "  created() {},",
            "  // 挂载完成(可以访问DOM元素)",
            "  mounted() {},",
            "  // 创建之前",
            "  beforeCreate() {},",
            "  // 挂载之前",
            "  beforeMount() {},",
            "  // 更新之前",
            "  beforeUpdate() {},",
            "  // 更新之后",
            "  updated() {},",
            "  // 销毁之前",
            "  beforeDestroy() {},",
            "  // 销毁完成",
            "  destroyed() {},",
            "  // --------------------------- 生命周期 end -----------------------------------",
            "  // 如果页面有keep-alive缓存功能,这个函数会触发",
            "  activated() {}",
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "// @import url($3) 引入公共css类",
            "</style>"
        ],
        "description": "Log output to console"
    }
}
复制代码

当我们创建vue文件后,直接输入 vue 然后按 tab,完美呈现

 

 

 

posted @   一事冇诚  阅读(1605)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示